英文:
Scrollable sidebar with full height main with tailwind
问题
我正在尝试使用Tailwind创建一个具有全高度主内容的可滚动侧边栏。我尝试使用overflow,但不起作用。我只想使ul可滚动,其他部分应具有页面的全高度。
<div class="flex h-full w-full flex-col">
<!-- 网页头部 -->
<header class="bg-neutral-300">Header</header>
<div class="flex flex-1 gap-5">
<!-- 侧边栏和主内容 -->
<aside class="flex w-1/6 items-center">
<ul class="flex flex-col gap-10 overflow-auto bg-red-300 text-sm">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<li>List Item 10</li>
<li>List Item 11</li>
<li>List Item 12</li>
<li>List Item 13</li>
<li>List Item 14</li>
<li>List Item 15</li>
<li>List Item 16</li>
<li>List Item 17</li>
<li>List Item 18</li>
<li>List Item 19</li>
<li>List Item 20</li>
</ul>
<div class="bg-red-600 p-2 text-xs">点击箭头以切换侧边栏</div>
</aside>
<main class="flex-1 overflow-hidden bg-green-300">这是主内容</main>
</div>
</div>
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
height: 100%;
width: 100%;
}
请注意,我保留了HTML和Tailwind CSS中的原始代码,只翻译了您要求的部分。
英文:
I am trying to create a scrollable sidebar with a full-height main using Tailwind.
I tried using the overflow but it doesn't work. I only want to make the ul scrollable, the others should have the full height of the page.
<div class="flex h-full w-full flex-col">
<!-- Website -->
<header class="bg-neutral-300">Header</header>
<div class="flex flex-1 gap-5">
<!-- Sidebar and main -->
<aside class="flex w-1/6 items-center">
<ul class="flex flex-col gap-10 overflow-auto bg-red-300 text-sm">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<li>List Item 10</li>
<li>List Item 11</li>
<li>List Item 12</li>
<li>List Item 13</li>
<li>List Item 14</li>
<li>List Item 15</li>
<li>List Item 16</li>
<li>List Item 17</li>
<li>List Item 18</li>
<li>List Item 19</li>
<li>List Item 20</li>
</ul>
<div class="bg-red-600 p-2 text-xs">arrow to toggle sidebar</div>
</aside>
<main class="flex-1 overflow-hidden bg-green-300">This is main</main>
</div>
</div>
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
height: 100%;
width: 100%;
}
答案1
得分: 2
Consider applying min-height: 0
to the second <div>
element to override the implicit min-height: min-content
. Then, apply max-height: 100%
to the <ul>
so that it does not overflow the container. This will mean the content of the <ul>
will overflow, making it scrollable.
html,
body {
height: 100%;
width: 100%;
}
<script src="https://cdn.tailwindcss.com/3.3.2"></script>
<div class="flex h-full w-full flex-col">
<!-- Website -->
<header class="bg-neutral-300">Header</header>
<div class="flex flex-1 gap-5 min-h-0">
<!-- Sidebar and main -->
<aside class="flex w-1/6 items-center">
<ul class="flex flex-col gap-10 overflow-auto bg-red-300 text-sm max-h-full">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<li>List Item 10</li>
<li>List Item 11</li>
<li>List Item 12</li>
<li>List Item 13</li>
<li>List Item 14</li>
<li>List Item 15</li>
<li>List Item 16</li>
<li>List Item 17</li>
<li>List Item 18</li>
<li>List Item 19</li>
<li>List Item 20</li>
</ul>
<div class="bg-red-600 p-2 text-xs">arrow to toggle sidebar</div>
</aside>
<main class="flex-1 overflow-hidden bg-green-300">This is main</main>
</div>
</div>
英文:
Consider applying min-height: 0
to the second <div>
element to override the implicit min-height: min-content
. Then, apply max-height: 100%
to the <ul>
so that it does not overflow the container. This will mean the content of the <ul>
will overflow, making it scrollable.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
html,
body {
height: 100%;
width: 100%;
}
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com/3.3.2"></script>
<div class="flex h-full w-full flex-col">
<!-- Website -->
<header class="bg-neutral-300">Header</header>
<div class="flex flex-1 gap-5 min-h-0">
<!-- Sidebar and main -->
<aside class="flex w-1/6 items-center">
<ul class="flex flex-col gap-10 overflow-auto bg-red-300 text-sm max-h-full">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<li>List Item 10</li>
<li>List Item 11</li>
<li>List Item 12</li>
<li>List Item 13</li>
<li>List Item 14</li>
<li>List Item 15</li>
<li>List Item 16</li>
<li>List Item 17</li>
<li>List Item 18</li>
<li>List Item 19</li>
<li>List Item 20</li>
</ul>
<div class="bg-red-600 p-2 text-xs">arrow to toggle sidebar</div>
</aside>
<main class="flex-1 overflow-hidden bg-green-300">This is main</main>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论