我有一个包含两列的布局 - 一个 leftdiv和一个 right div。
右边div有一个灰色background-color，我需要它根据用户浏览器窗口的高度垂直扩展。现在background-color结束在最后一段内容div。
我试过height:100%，min-height:100%;等
解决方法
有几个 CSS 3 度量单位称为：
视口百分比（或视口相对）长度
什么是视口百分比长度？
来自上面链接的 W3 候选推荐：
视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。
这些单位是vh（视口高度）、vw（视口宽度）、vmin（视口最小长度）和vmax（视口最大长度）。
这怎么可能用来做除法填补了浏览器的高度？
对于这个问题，我们可以使用vh:1vh等于视口高度的 1%。也就是说，100vh等于浏览器窗口的高度，而不管元素在 DOM 树中的位置：
HTML
<div></div>
CSS
div {
height: 100vh;
}
这实际上就是所需要的。这是一个使用中的JSFiddle 示例。
什么浏览器支持这些新单位？
目前，除 Opera Mini 外，所有最新的主要浏览器都支持此功能。查看Can I use...以获得进一步的支持。
这怎么可能有多个列使用？
在手头的问题的情况下，具有左右分隔符，这是一个JSFiddle 示例，显示了包含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标签将是 100% 的高度，而body不管div高度。看看这个随附的 JSFiddle可以轻松看出区别！
