即使有了这里的所有答案，我还是惊讶地发现没有一个真正解决了这个问题。如果我使用100vh的高度/分钟的高度，当内容超过一页时，布局就会中断。如果我改用100%高度/分钟高度，当内容小于页面高度时，布局会中断。

我找到的解决方案（解决了这两种情况）是结合前两个答案：

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

此内容将根据您的浏览器。我希望这对你有用。试试这个例子下文给出。

您只需设置高度：100%。

html，正文{高度：100%；边距：0；}.内容{高度：100%；最小高度：100%；位置：相对；}.剩余内容{高度：自动；最小高度：100%；浮动：左侧；背景：#ddd；宽度：50%；位置：相对；}#一个{背景：url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png)中央无重复滚动#aaa；宽度：50%；位置：相对；浮动：左侧；}#两个{背景：url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png)中央无重复滚动#520E24；宽度：50%；浮动：左侧；位置：相对；overflow-y：滚动；}<div class='content'id='one'></div><div class='content-left'id='wo'></div>

尝试一下。。。

* {填充：0；边距：0；}.父目录{溢出：隐藏；清晰：两者都有；颜色：#FFF；文本对齐：居中；}.left_div{浮动：左侧；高度：100vh；宽度：50%；背景色：蓝色；}.右_右{浮动：右侧；高度：100vh；宽度：50%；背景色：绿色；}<div class=“parent_div”><div class=“left_div”>左</div><div class=“right_div”>右</div></div>

.包装器{显示：-webkit框；显示：-ms flexbox；显示：柔性；-ms-flex-wrap:包裹；柔性包裹：包裹；高度：100vh；/*高度窗口（vh）*/}.包装器.左侧{宽度：80%；/*宽度可选，但建议使用*/}.包装器.右侧{宽度：20%；/*宽度可选，但建议使用*/背景色：#DD1F26；}<!--vw：视口宽度的百分之一。vh：视口高度的百分之一。vmin：视口宽度或高度中较小者的百分之一。vmax：视口宽度或高度中较大者的百分之一。--><div class=“wrapper”><div class=“left”>左边</div><div class=“right”>正确的</div></div>

使用FlexBox CSS

Flexbox非常适合这类问题。虽然Flexbox主要以水平方向布局内容而闻名，但它实际上同样适用于垂直布局问题。您所要做的就是将垂直部分包装在柔性容器中，并选择要展开的部分。它们将自动占用容器中的所有可用空间。

如果将html和body_height设置为100%，它将覆盖整个页面。

如果您将任何特定的div最小高度设置为100%，那么它将覆盖整个窗口，如下所示：

CSS

html, body {
  height: 100%;
}

div#some-div {
  min-height: 100%;
}

回想起

只有当div的直接父级是body时，这才有效，因为百分比总是从直接父级继承的，通过执行上面的CSS代码，您告诉div从直接父（body）继承100%的高度，并使其成为您的最小高度：100%。

另一种方式

只需将div高度设置为100vh。这意味着视口高度为100。

CSS

div#some-div {
  height: 100vh
}