问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我的布局有两列 - 左边 div 和右边 div 。

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

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

原文由 mike 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssheight
阅读 311
1 个回答
得票最新
社区维基
1

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

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

什么是视口百分比长度？

来自上面链接的 W3 候选推荐：

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

These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum长度）。

这如何用于使分隔线填充浏览器的高度？

对于这个问题，我们可以使用 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% --- 高度。 Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height.看看这个 随附的 JSFiddle ，可以轻松看出其中的区别！

原文由 James Donnelly 发布，翻译遵循 CC BY-SA 4.0 许可协议

查看全部 1 个回答
推荐问题