Scrollable sidebar with full height main with tailwind

huangapple go评论259阅读模式
英文:

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.

 &lt;div class=&quot;flex h-full w-full flex-col&quot;&gt;
  &lt;!-- Website --&gt;
  &lt;header class=&quot;bg-neutral-300&quot;&gt;Header&lt;/header&gt;
  &lt;div class=&quot;flex flex-1 gap-5&quot;&gt;
    &lt;!-- Sidebar and main --&gt;
    &lt;aside class=&quot;flex w-1/6 items-center&quot;&gt;
      &lt;ul class=&quot;flex flex-col gap-10 overflow-auto bg-red-300 text-sm&quot;&gt;
        &lt;li&gt;List Item 1&lt;/li&gt;
        &lt;li&gt;List Item 2&lt;/li&gt;
        &lt;li&gt;List Item 3&lt;/li&gt;
        &lt;li&gt;List Item 4&lt;/li&gt;
        &lt;li&gt;List Item 5&lt;/li&gt;
        &lt;li&gt;List Item 6&lt;/li&gt;
        &lt;li&gt;List Item 7&lt;/li&gt;
        &lt;li&gt;List Item 8&lt;/li&gt;
        &lt;li&gt;List Item 9&lt;/li&gt;
        &lt;li&gt;List Item 10&lt;/li&gt;
        &lt;li&gt;List Item 11&lt;/li&gt;
        &lt;li&gt;List Item 12&lt;/li&gt;
        &lt;li&gt;List Item 13&lt;/li&gt;
        &lt;li&gt;List Item 14&lt;/li&gt;
        &lt;li&gt;List Item 15&lt;/li&gt;
        &lt;li&gt;List Item 16&lt;/li&gt;
        &lt;li&gt;List Item 17&lt;/li&gt;
        &lt;li&gt;List Item 18&lt;/li&gt;
        &lt;li&gt;List Item 19&lt;/li&gt;
        &lt;li&gt;List Item 20&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class=&quot;bg-red-600 p-2 text-xs&quot;&gt;arrow to toggle sidebar&lt;/div&gt;
    &lt;/aside&gt;
    &lt;main class=&quot;flex-1 overflow-hidden bg-green-300&quot;&gt;This is main&lt;/main&gt;
  &lt;/div&gt;
&lt;/div&gt;

@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 &lt;div&gt; element to override the implicit min-height: min-content. Then, apply max-height: 100% to the &lt;ul&gt; so that it does not overflow the container. This will mean the content of the &lt;ul&gt; 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 -->

&lt;script src=&quot;https://cdn.tailwindcss.com/3.3.2&quot;&gt;&lt;/script&gt;

&lt;div class=&quot;flex h-full w-full flex-col&quot;&gt;
  &lt;!-- Website --&gt;
  &lt;header class=&quot;bg-neutral-300&quot;&gt;Header&lt;/header&gt;
  &lt;div class=&quot;flex flex-1 gap-5 min-h-0&quot;&gt;
    &lt;!-- Sidebar and main --&gt;
    &lt;aside class=&quot;flex w-1/6 items-center&quot;&gt;
      &lt;ul class=&quot;flex flex-col gap-10 overflow-auto bg-red-300 text-sm max-h-full&quot;&gt;
        &lt;li&gt;List Item 1&lt;/li&gt;
        &lt;li&gt;List Item 2&lt;/li&gt;
        &lt;li&gt;List Item 3&lt;/li&gt;
        &lt;li&gt;List Item 4&lt;/li&gt;
        &lt;li&gt;List Item 5&lt;/li&gt;
        &lt;li&gt;List Item 6&lt;/li&gt;
        &lt;li&gt;List Item 7&lt;/li&gt;
        &lt;li&gt;List Item 8&lt;/li&gt;
        &lt;li&gt;List Item 9&lt;/li&gt;
        &lt;li&gt;List Item 10&lt;/li&gt;
        &lt;li&gt;List Item 11&lt;/li&gt;
        &lt;li&gt;List Item 12&lt;/li&gt;
        &lt;li&gt;List Item 13&lt;/li&gt;
        &lt;li&gt;List Item 14&lt;/li&gt;
        &lt;li&gt;List Item 15&lt;/li&gt;
        &lt;li&gt;List Item 16&lt;/li&gt;
        &lt;li&gt;List Item 17&lt;/li&gt;
        &lt;li&gt;List Item 18&lt;/li&gt;
        &lt;li&gt;List Item 19&lt;/li&gt;
        &lt;li&gt;List Item 20&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class=&quot;bg-red-600 p-2 text-xs&quot;&gt;arrow to toggle sidebar&lt;/div&gt;
    &lt;/aside&gt;
    &lt;main class=&quot;flex-1 overflow-hidden bg-green-300&quot;&gt;This is main&lt;/main&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月23日 22:07:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/76748654.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定