我有一个包含两列的布局 - 左侧 div 和右侧 div。
右边的div有一个灰色的background-color，我需要它根据用户浏览器窗口的高度垂直展开。现在，background-color 结束于该div 中的最后一段内容。
我试过height:100%、min-height:100%;等
最佳答案
有几个 CSS 3 度量单位称为:
来自上面链接的 W3 候选推荐:
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.
这些单位是vh(视口(viewport)高度)、vw(视口(viewport)宽度)、vmin(视口(viewport)最小长度)和vmax (视口(viewport)最大长度)。
对于这个问题，我们可以利用vh:1vh等于视口(viewport)高度的1%。也就是说，100vh 等于浏览器窗口的高度，与元素在 DOM 树中的位置无关:
<div></div>
div {
height: 100vh;
}
这实际上就是所有需要的。这是 JSFiddle example这个在使用中。
目前所有最新的主流浏览器都支持此功能，除了 Opera Mini。查看 Can I use...以获得进一步的支持。
对于手头的问题，具有左右分隔符，这里是 JSFiddle example显示包含 vh 和 vw 的两列布局。
100vh 与 100% 有何不同？以这个布局为例:
<body style="height: 100%">
<div style="height: 200px">
<p style="height: 100%; display: block;">Hello, world!</p>
</div>
</body>
这里的p标签设置为100%的高度，但是因为它包含的div有200像素的高度，200像素的100%变成了200像素，不是 body 高度的 100%。改用 100vh 意味着 p 标签将是 body 的 100% 高度，而与 div 高度无关。看看这个accompanying JSFiddle很容易看出区别!
https://stackoverflow.com/questions/1575141/