如何使div的浏览器窗口高度为100%
我有两列的布局-左div
和右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之外,所有最新的主流浏览器均支持此功能。查看我可以使用…以获得更多支持。
如何与多列一起使用?
对于具有左右分隔线的当前问题,这是一个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,可以轻松看到其中的区别!
以上是 如何使div的浏览器窗口高度为100% 的全部内容, 来源链接: utcz.com/qa/415987.html