一尘不染

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

javascript

我有一个包含两列的布局 - leftdiv和 right div。

右边div有一个 gray background-color，我需要它根据用户浏览器窗口的高度垂直扩展。现在background-color结束在最后一段内容中div。

我试过了height:100%，min-height:100%;等等。

阅读 172

2022-02-07

共1个答案

一尘不染

有几个 CSS 3 度量单位称为：

从上面链接的 W3 候选推荐中：

视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

这些单位是vh（视口高度）、vw（视口宽度）、vmin（视口最小长度）和vmax（视口最大长度）。

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

<div></div>

div {
    height: 100vh;
}

这实际上就是所有需要的。这是一个使用中的JSFiddle 示例。

目前，除 Opera Mini 外，所有最新的主流浏览器都支持此功能。查看我可以使用…以获得进一步的支持。

对于手头的问题，具有左右分隔符，这里是一个JSFiddle 示例vh，显示了一个包含和的两列布局vw。

以这种布局为例：

<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 像素，而不是100% 的body高度。使用100vh代替意味着p标签将是 100% 的高度，而body不管div高度如何。

2022-02-07