我有一个包含两列的布局-左div和右div。
右侧的div具有灰色背景色，我需要它根据用户浏览器窗口的高度垂直展开。现在，背景色结束于该分区中的最后一段内容。
我尝试过高度：100%，最小高度：100%；，等
当前回答
尝试此操作-已测试：
body {
min-height: 100%;
}
#right, #left {
height: 100%;
}
在以后的版本中，您可以使用vh：
#right, #left {
height: 100vh
}
其他回答
即使有了这里的所有答案，我还是惊讶地发现没有一个真正解决了这个问题。如果我使用100vh的高度/分钟的高度，当内容超过一页时，布局就会中断。如果我改用100%高度/分钟高度，当内容小于页面高度时，布局会中断。
我找到的解决方案（解决了这两种情况）是结合前两个答案：
html, body, #mydiv {
height: 100%;
min-height: 100vh;
}
与flex模型解决方案相比，所有其他解决方案，包括投票最高的vh解决方案都是次优的。
随着CSS flex模型的出现，解决100%高度问题变得非常非常简单：使用高度：100%；显示：父元素上显示flex，子元素上显示flex:1。它们将自动占用容器中的所有可用空间。
注意标记和CSS是多么简单。没有桌子黑客之类的。
所有主要浏览器以及IE11+都支持flex模型。
html，正文{高度：100%；}正文{显示：柔性；}.左，.右{挠曲：1；}.左侧{背景：橙色；}.对{背景：青色；}<div class=“left”>左</div><div class=“right”>右</div>
在这里了解有关flex模型的更多信息。
以下内容与您之前的回答不完全相同，但可能对某些人有所帮助：
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0px;
}
#one {
background-color: red;
}
#two {
margin-top: 0px;
background-color: black;
color: white;
overflow-y: scroll;
}
https://jsfiddle.net/newdark/qyxkk558/10/
如果将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
}
如果你能绝对定位你的元素，
position: absolute;
top: 0;
bottom: 0;
会做到这一点。
