html - CSS(顺风)网格高度 100vh 不工作

Question

目前我正在尝试创建一个填满整个屏幕的布局。 以为它很简单，但发现它没有按预期工作。

这是一个 fiddle https://jsfiddle.net/s5ocg3v8/36/

<div class="h-screen grid grid-rows-[auto_1fr] p-5">
  <div class="bg-slate-200 mb-1 p-2">Header</div>
  <div class="grid grid-cols-[auto_1fr]">
    <div class="bg-slate-200 mr-1 p-2">Navigation</div>
    <div class="bg-slate-200 p-2 overflow-y-auto">
    Container
      <div class="border-2 border-black" style="height: 1000px;">
      Content
      </div>
    </div>
  </div>
</div>

如果内容变得比容器大，定义的高度将被忽略。

我希望布局始终填满整个屏幕，但不要更多，如果内容更大，那么它应该为容器显示一个滚动条。

我可以将标题设置为固定高度，然后使用 calc(100%-headerHeight) 但这并不是我真正想要的

Answer 1

只需将 min-h-0 添加到第二个网格容器即可。

<script src="https://cdn.tailwindcss.com"></script>

<div class="h-screen grid grid-rows-[auto_1fr] p-5">
  <div class="bg-slate-200 mb-1 p-2">Header</div>
  <div class="grid grid-cols-[auto_1fr] min-h-0">
    <div class="bg-slate-200 mr-1 p-2">Navigation</div>
    <div class="bg-slate-200 p-2 overflow-y-auto">
    Container
      <div class="border-2 border-black" style="height: 1000px;">
      Content
      </div>
    </div>
  </div>
</div>

或者总是喜欢 minmax(0,1fr) 而不是 1fr

<script src="https://cdn.tailwindcss.com"></script>

<div class="h-screen grid grid-rows-[auto_minmax(0,1fr)] p-5">
  <div class="bg-slate-200 mb-1 p-2">Header</div>
  <div class="grid grid-cols-[auto_1fr]">
    <div class="bg-slate-200 mr-1 p-2">Navigation</div>
    <div class="bg-slate-200 p-2 overflow-y-auto">
      Container
      <div class="border-2 border-black" style="height: 1000px;">
        Content
      </div>
    </div>
  </div>
</div>