There are a couple of CSS 3 measurement units called:
(有几个CSS 3度量单位,称为:)
What are Viewport-Percentage Lengths? (什么是视口百分比长度?)
From the linked W3 Candidate Recommendation above:
(根据上面链接的W3候选推荐书:)
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).
(这些单位是vh
(视口高度), vw
(视口宽度), vmin
(视口最小长度)和vmax
(视口最大长度)。)
How can this be used to make a divider fill the height of the browser? (如何使用它来使分隔符填充浏览器的高度?)
For this question, we can make use of vh
: 1vh
is equal to 1% of the viewport's height.
(对于这个问题,我们可以使用vh
: 1vh
等于视口高度的1%。)
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: (也就是说,无论元素在DOM树中位于何处, 100vh
都等于浏览器窗口的高度:)
HTML (的HTML)
<div></div>
CSS (的CSS)
div {
height: 100vh;
}
This is literally all that's needed.
(这实际上就是所需要的。)
Here is a JSFiddle example of this in use. (这是一个正在使用的JSFiddle示例 。)
What browsers support these new units? (哪些浏览器支持这些新单元?)
This is currently supported on all up-to-date major browsers apart from Opera Mini.
(目前,除Opera Mini之外,所有最新的主流浏览器均支持此功能。)
Check out Can I use... for further support. (查看我可以使用...以获得更多支持。)
How can this be used with multiple columns? (如何与多列一起使用?)
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
.
(对于具有左右分隔线的当前问题,这是一个JSFiddle示例,显示了涉及vh
和vw
的两列布局。)
How is 100vh
different to 100%
? (100vh
与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 200 pixels height, 100% of 200 pixels becomes 200 pixels, not 100% of the body
height.
(此处的p
标签设置为100%高度,但是由于其包含div
高度为200像素,因此200像素的100%变为200像素, 而不是 body
高度的100%。)
Using 100vh
instead means that the p
tag will be 100% height of the body
regardless of the div
height. (相反,使用100vh
意味着p
标签将为body
100%高度,而与div
高度无关。)
Take a look at this accompanying JSFiddle to easily see the difference! (看看这个随附的JSFiddle,可以轻松看到其中的区别!)