如何在部分填充时强制 body 为屏幕大小？

Question

我想建立一个网站，其中有一个固定的 header、一个可变的内容和一个页面未完全填充时位于底部的页脚。我将使用 CSS Grid Layout为此。

在已知高度的情况下扩展内容元素很容易：

div {
  border-width: 1px;
  border-style: solid;
}

#container {
  width: 200px;
  height: 200px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

<div id="container">
  <div>hello </div>
  <div>world</div>
  <div>three</div>
</div>

然后我尝试在完整的 window 浏览器上重现它，但我不知道如何告诉应用程序“如果没有足够的内容，高度就是浏览器的大小，否则就是内容”。我认为 min-height: 100%; 应用于 body 会很好 - 但事实并非如此：

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr auto;
    min-height: 100%;
}
.navbar {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;
}
.main {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
}
.toc {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
}
.footer {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 3;
}

此代码创建了正确的网格，但 body 的大小不是浏览器的整个高度：

Answer 1

而不是 min-height:100%，使用 min-height: 100vh。

百分比高度很棘手，因为它们通常需要在父元素上定义高度 ()。

来自规范：

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

vw unit - Equal to 1% of the width of the initial containing block.

vh unit - Equal to 1% of the height of the initial containing block.

vmin unit - Equal to the smaller of vw or vh.

vmax unit - Equal to the larger of vw or vh.

如何在部分填充时强制 body 为屏幕大小？

How to force body to be the size of the screen when partially filled in?

html

css

css-grid