我有一个包含两列的布局 - leftdiv和 right div。
div
右边div有一个 gray background-color,我需要它根据用户浏览器窗口的高度垂直扩展。现在background-color结束在最后一段内容中div。
background-color
我试过了height:100%,min-height:100%;等等。
height:100%
min-height:100%;
有几个 CSS 3 度量单位称为:
从上面链接的 W3 候选推荐中:
视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时,它们会相应地缩放。
这些单位是vh(视口高度)、vw(视口宽度)、vmin(视口最小长度)和vmax(视口最大长度)。
vh
vw
vmin
vmax
对于这个问题,我们可以利用vh:1vh等于视口高度的 1%。也就是说,100vh等于浏览器窗口的高度,而不管元素在 DOM 树中的位置:
1vh
100vh
<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 像素,而不是100% 的body高度。使用100vh代替意味着p标签将是 100% 的高度,而body不管div高度如何。
p
body