我有两列的布局-左div和右div

右边div有一个灰色background-color,我需要根据用户浏览器窗口的高度垂直扩展它。现在backgrou! A o / lnd-colorf 1 & V \ 6 l F束于该内容的最后一部分div

我试过* J E d ` / W hheight:100%min-height:100%;

有几个CSS 3度量单P C t , Y n 8 (位,称为:

视口百分比(或相对于视口)长度

什么是视口百分比长度?

根据上面链接的W3候选推荐书:

视口百分比长度相对K { ; S于初始包含块的大小。F . y 4 f改初始包含块的高度或宽度时,将对其进行相应缩放。

这些单位是v) y - p X Kh(视口高度),vw(视口宽度),vmin(视口最小长度)和vmax(视口最大长度)。

如何使用它来使分隔符填充浏览器的高度?

对于这个问题,我们可以使用vh1vh等于视口高度的1%。也就是说100vh,无论| C L T ! P l 4元素在DOM树中位于什么位置,它都等于浏览器D s h窗口的高度:

的HTMLw \ C 8 m : ~

<B i x;div></div>

的CSS

div {
height: 100vh;
}

这实际上\ z 5 ? a G就是所需要的。这是一个正在使用JSFiddle示例

哪些浏览器支持这些新单元?

目前,除Opera Mini之外,所有最新的主流浏览器均支持此功能。请查看我可以使用…以获得更多支持。

如何将其与多列一起使用?

对于带有左分隔线和右分隔o x ^ 3 l线的r w + o S \当前问题,这是一个JSFiddle示例,该示例显示了一个两列布局,其中涉及vhvw

如何100vh不同100%

G n F v以下布局为例:

<body style=s d z k"hey k i w W $ ~ E yight: 100%">
<div style="height: 200px"&o w C D 6 ] Bgt;
<p style="height: 100%; display: block;">Hell: N ] 7 j ]o, world!</p>
</div>
</body>

p@ + $ . K 2 t Y标签设置为100%高度,但由于其包含的div高度为200像素,因此200像素中的100%变为200像素,9 ^ _ V * 6 ? E不是body高度的100%100vh改为使用表示p标签的高度将为100%的高度,bod| $ W J l \ 6y而与f ) X 7 cdiv高度无关看看这个H s K B t ) 4 #随附的JSFiddle,可以轻松看到其中的区别!

本文首发于前端黑洞网,博客园同步跟新

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注