更新时间:2022-10-19 13:12:57
有几个CSS3测量单位称为:
从上面链接的W3候选推荐标准:
视口百分比长度是相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时,它们会相应地缩放。
这些单位是 vh
(视口高度), vw
(视口宽度), vmin
(视口最小长度)和 vmax
(视口最大长度)。
对于这个问题,我们可以使用 vh
: 1vh
等于视口高度的1%。也就是说,无论元素在DOM树中的位置如何, 100vh
等于浏览器窗口的高度:
< div>< / div>
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
的高度为200px,所以200px的100%变为200px, 不是正文
高度。使用 100vh
来代替 p
标记将是主体的100%高度 code>不管
div
高度。看看这个随附的JSFiddle ,轻松看到其中的差异!
I have a layout with two columns - a left div
and a right div
.
The right div
has a grey background-color
, and I need it to expand vertically depending on the height of the user's browser window. Right now the background-color
ends at the last piece of content in that div
.
I've tried height:100%
, min-height:100%;
etc.
There are a couple of CSS3 measurement units called:
From the linked W3 Candidate Recommendation above:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
These units are vh
(viewport height), vw
(viewport width), vmin
(viewport minimum length) and vmax
(viewport maximum length).
For this question, we can make use of vh
: 1vh
is equal to 1% of the viewport's height. That is to say, 100vh
is equal to the height of the browser window, regardless of where the element is situated in the DOM tree:
<div></div>
div {
height:100vh;
}
This is literally all that's needed. Here is a JSFiddle example of this in use.
This is currently supported on all up-to-date major browsers apart from Opera Mini. Check out Can I use... for further support.
In the case of the question at hand, featuring a left and a right divider, here is a JSFiddle example showing a two-column layout involving both vh
and vw
.
100vh
different to 100%
?Take this layout for example:
<body style="height:100%">
<div style="height:200px">
<p style="height:100%; display:block;">Hello, world!</p>
</div>
</body>
The p
tag here is set to 100% height, but because its containing div
has 200px height, 100% of 200px becomes 200px, not 100% of the body
height. Using 100vh
instead means that the p
tag will be 100% height of the body
regardless of the div
height. Take a look at this accompanying JSFiddle to easily see the difference!