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

我有一个两列的布局——左列和右列。divdiv

右边有一个灰色，我需要它根据用户浏览器窗口的高度垂直扩展。现在，在最后一段内容结束。divbackground-colorbackground-colordiv

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

分割线

网友回答：

如果要设置一个或任何元素的高度，则还应将和的高度设置为 100%。然后你可以用100%🙂设置元素的高度<div><body><html>

下面是一个示例：

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

分割线

网友回答：

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

视口百分比（或视口相对）长度

什么是视口百分比长度？

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

视区百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度发生更改时，它们会相应地缩放。

这些单位是（视口高度）、（视口宽度）、（视口最小长度）和（视口最大长度）。vhvwvminvmax

如何使用它来使分隔器填充浏览器的高度？

对于这个问题，我们可以利用：等于视口高度的 1%。也就是说，等于浏览器窗口的高度，无论元素在 DOM 树中的位置如何：vh1vh100vh

.HTML

<div></div>

.CSS

div {
    height: 100vh;
}

这实际上就是所有需要的。下面是一个正在使用的 JSFiddle 示例。

哪些浏览器支持这些新单元？

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

如何将其与多列一起使用？

对于手头的问题，具有左分隔符和右分隔符，下面是一个 JSFiddle 示例，显示了涉及和的两列布局。vhvw

与有何不同？`100vh100%`

以这个布局为例：

<body style="height: 100%">
    <div style="height: 200px">
        <p style="height: 100%; display: block;">Hello, world!</p>
    </div>
</body>

此处的标记设置为 100% 高度，但由于其包含的高度为 200 像素，因此 100 像素的 200% 变为 200 像素，而不是高度的 100%。相反，使用意味着无论高度如何，标签都将是 100% 的高度。看看这个随附的JSFiddle，很容易看到区别！pdivbody100vhpbodydiv

分割线

网友回答：

如果你能够绝对定位你的元素，

position: absolute;
top: 0;
bottom: 0;

会这样做。

模板简介：该模板名称为【如何使浏览器窗口的 div 高度为 100%】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。