小编典典

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

javascript

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

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

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


阅读 237

收藏
2022-02-07

共1个答案

小编典典

有几个 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

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

2022-02-07