如何使div的浏览器窗口高度为100％

来源：cnblogs　　作者：python之恋　　时间：2021/5/10 8:48:24　　对本文有异议

我有两列的布局-左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，可以轻松看到其中的区别！