我有一个包含两列的布局-左div和右div。
右侧的div有一个灰色的background-color，我需要它根据用户浏览器窗口的高度垂直展开。 现在，background-color结束于div中的最后一段内容。
我试过height:100%，min-height:100%；等。
有两个CSS3度量单位，称为:
从上面链接的W3候选人推荐中:
视口百分比长度与初始包含块的大小有关。 当初始包含块的高度或宽度改变时，它们将相应地缩放。
这些单位是vh（视口高度），vw（视口宽度），vmin（视口最小长度）和vmax（视口最大长度）。
对于这个问题，我们可以使用VH:1VH等于视口高度的1%。 也就是说，100VH等于浏览器窗口的高度，而不管元素位于DOM树中的哪个位置:
<div></div>
div {
height: 100vh;
}
这就是所需要的一切。 下面是一个JSFiddle示例。
除了Opera Mini之外，目前所有最新的主流浏览器都支持这一功能。 退房我可以用。。。 以寻求进一步的支持。
对于手边的问题，这里有一个左分隔符和一个右分隔符，下面是一个JSFiddle示例，显示了一个包含vh和vw的双列布局。
以这个布局为例:
<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高度无关。 看一看这个附带的JSFiddle，就能轻松看出其中的区别了！
如果要设置 下面是一个例子:或任何元素的高度，则应将
和的高度也设置为100%。 然后可以将元素的高度设置为100%:）body, html {
height: 100%;
}
#right {
height: 100%;
}
如果你能够绝对定位你的元素，
position: absolute;
top: 0;
bottom: 0;
会这么做的。
