部分填充时如何强制身体尺寸？

Question

我想建立一个网站,其中有一个固定的标题,一个可变的内容和一个页脚,当页面没有完全填入时,它位于底部.我将使用CSS网格布局.

知道高度时扩展内容元素很容易:

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>

然后我试图在一个完整的窗口浏览器上重现这个,我不知道如何告诉应用程序" 如果没有足够的内容,高度就是浏览器的大小,否则这就是内容 ".我认为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. 视口百分比长度：vw, vh, vmin,vmax单位

视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

• vw unit - 等于初始包含块宽度的 1%。
• vh unit - 等于初始包含块高度的 1%。
• vmin unit - 等于vw或 中的较小者vh。
• vmax unit - 等于vw或 中的较大者vh。