将 HTML 和 BODY 选择器设置为高度: 100% ; 相对于使用100vh

我哥哥和我之前在一起玩的时候他突然喊道: “我学到了新东西!”

有点吃惊,我问,“那是什么. . ?”

他回答说: “观景台的高度!我开始使用 IE6的时候,它还没有得到完全支持,所以我再也没有仔细研究过它。”然后他继续向我展示。

我回答说: “我在这里完成了同样的事情。”然后向他展示了另一个我搞砸的沙盒项目。

在我的项目中,在 CSS 中,我写道

(编辑: 我编辑后把背景颜色放在 div 中,而不是 html 或 body 中,这是我的错误)

(jsfiddle http://jsfiddle.net/nvLq8eg9/embedded/result/)

html, body {
height: 100%;
}


div {
height: 100%;
background: green;
}

他的原则是, (jsfiddle http://jsfiddle.net/nvLq8eg9/1/embedded/result/)

div {
height: 100vh;
background: green;
}

两者实际上做了同样的事情。在这里做了一些研究之后,似乎通过前一种方法常见的问题是无法滚动; 然而,在我的沙盒项目中,我有更多的内容,并能够滚动和正常与网站交互。

我们都不能确定这两种方法之间的区别。这里有人能教育我们吗?

谢谢!

101844 次浏览

height: 100vh = 视窗高度的100%

height: 100% = 父元素高度的100%

这就是为什么需要在 htmlbody上添加 height: 100%,因为它们默认没有大小

您必须知道: 如果使用% 作为垂直边距或填充,% 将在父元素的 宽度上计算,而不是在高度上计算。

提示: 尝试使用 vh 和 vw 单元来设置字体大小:)我喜欢这个(我知道的一些浏览器不支持) : font-size: calc(.5vh + .5vw);(例如)

这里有一个不错的 CSS 单元页面: http://css-tricks.com/the-lengths-of-css/

高度: 100vh = 视窗高度的100%

从技术上讲,这是正确的,但是一个更好的思考方式是 = 100% 的可用高度。

如果您希望用可用高度填充 div,那么这是一个非常有用的技巧。在我了解这一点之前,我必须确保从 html 到嵌套 div 的每个 div 的高度都是100% ,这可能会很乏味,而且容易出错。相反,我现在只在嵌套项上使用 height: 100vh。

参见下面的 gist.run,获得一个使用 Bootstrap 4.1的 例子:

视图端口单位 = Vw,vh,vmin 和 vmax-基于浏览器视图端口的大小。 因为,他们的实际大小变化取决于视口大小,这使得他们响应设计的伟大单位

注: 处理宽度时,%单元更适合,但处理高度时,VH单元更好。

Viewport 的宽度实际上会大于 html 元素的宽度。

视图 > html > 主体

值得注意的是,移动工具栏没有包含在视窗高度中。显然这是故意的。(CSS3100vh 在移动浏览器中不是常数)这使得 vh 和 vw 在移动领域的使用非常令人沮丧。最糟糕的是当您的模态的 X按钮是由移动工具栏覆盖。

你可以在 vw中遇到类似的滚动条和主体边距/填充问题

如果您需要占据整个视口高度,可以考虑使用 height:100%(并确保在 html 和 body 标记上都设置 height:100%)。然而,如果您最终需要在一个长的嵌套元素链上指定 height:100%,那么如上所述,这将是一个巨大的痛苦。

如果您没有很多嵌套的元素,那么使用 height:100%似乎是个不错的选择。否则,使用大量嵌套元素,vh将为您节省麻烦。

如果移动工具栏仍然是一个相关的问题,那么您可能需要使用 window.innerHeight积极计算。

这也很有趣:

在这里,蓝色代表 <body>,红色代表 <html>。如果使用 100vh,然后调整浏览器的大小,使内容不完全可见-您得到滚动条。当你滚动时,<body>100vh,将停留在上面,你将看到 <html>的红色部分。

使用 100%时,<body>始终覆盖 <html>

enter image description here