页眉、侧边栏、内容 h-screen 布局与 TailwindCSS

Question

我正在尝试创建一个 Tailwind 布局，它具有固定高度的标题、固定宽度的侧边栏和内容，其中标题位于页面顶部，侧边栏和内容区域滚动。我想我已经掌握了基础知识：

<div class="flex flex-col h-screen">
  <header class="bg-green-500 h-20 shrink-0">
    header
  </header>
  <div class="flex flex-row h-full">
    <aside class="bg-red-500 w-1/3 overflow-y-scroll">
      aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside
    </aside>
    <main class="bg-blue-500 w-2/3 overflow-y-scroll">
      main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>
    </main>
  </div>
</div>

（jsfiddle here）

但是在文档正文中仍然有一个标题高度的滚动条。这是一个 Airbnb 风格的页面，其中

<aside>

中将有数十个列表，

<main>

中将有一张地图，因此重要的是两者都只占用标题高度后文档中剩余的垂直空间，并且不要超过该数量，而是做

overflow-y: scroll

.

需要明确的是，如果

<aside>

或

<main>

内容没有垂直填充所有空间，它应该被拉伸以填充它。但是如果那些元素的内容超过了文档的垂直空间（减去标题），它们应该被夹住并且溢出应该被滚动。

Answer 1

您的示例非常接近，您只需将标题下方的 div 中的

h-full

更改为

h-[calc(100vh-5rem)]

5rem 是标题的确切固定高度。

您可能还想将

overflow-y-scroll

更改为

overflow-y-auto

这样，如果内容不足以填充（除非您喜欢滚动条），它会隐藏滚动条。

这里有一个关于 Tailwind Play 的例子https://play.tailwindcss.com/g7Xwd6begg