HTML设置窗口最小值,html – 将div设置为浏览器窗口的100％高度

有几个相对较新的CSS3测量单位称为：

什么是视口 – 百分比长度？

从以上链接的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.

这些单位是vh(视口高度)，vw(视口宽度)，vmin(视口最小长度)和vmax(视口最大长度)。

如何可以使用这个分隔符来填充浏览器的高度？

对于这个问题，我们可以使用vh：1vh等于视口高度的1％。也就是说，100vh等于浏览器窗口的高度，而不管元素在DOM树中的位置：

HTML

CSS

div {

height:100vh;

}

这确实是所有需要的。这里是一个JSFiddle example的使用。

什么浏览器支持这些新单位？

除了Opera Mini和Android Browser，所有最新的主要浏览器都支持此功能。查看Can I use…以获得进一步的支持。

如何使用多列？

在现在的问题的情况下，具有左和右分隔线，这里是一个JSFiddle example显示两列布局涉及vh和vw。

如何100vh不同于100％？

以这个布局为例：

Hello, world!

这里的p标签设置为100％的高度，但是因为它包含的div具有200px的高度，200px的100％变成200px，而不是100％的身高。使用100vh代替意味着p标签将是body的100％高度，而不管div的高度。看看这个accompanying Fiddle容易看到差别！

什么是vmin和vmax？

1vmin假设1vh和1vw之间的最小值。

1vmax假设在1vh和1vw之间的最大值。

特别适用于字体大小。

*请注意，这些CSS3单位在Firefox中动态工作，但其他浏览器需要刷新页面。