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

Question

我哥哥和我早先在崇高中乱搞,他突然喊道:"我学到了新东西!"

有点震惊,我问道,"那是什么......？"

他回答说,"视口高度!我在IE6开始的时候没有得到完全支持,再也没有真正看过它了." 然后他继续给我看.

我回答说:"我在这里完成了同样的事情." 并向他展示了另一个我搞砸了的沙盒项目.

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

(编辑:我编辑将背景颜色放在div中,而不是html或正文,我的错误)

html, body {
    height: 100%;
}

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

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

两者都做了几乎相同的事情.在这里做了一些研究后,似乎通过前一种方法发出的常见问题是无法滚动; 但是,在我的沙箱项目中,我有更多的内容,并能够正常滚动和与网站交互.

我们都没有能够确定两种方法之间的差异.这里的任何人都可以教育我们吗？

谢谢!

Answer 1

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

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

这就是为什么你需要添加height: 100%的html和body,因为他们不具有的大小为默认

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

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

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

Answer 2

还值得注意的是，移动工具栏不包含在视口高度中。显然这是设计使然。（CSS3 100vh 在移动浏览器中不是恒定的）这使得 vh 和 vw 在移动设备上使用时令人沮丧。最糟糕的是当你的模态X按钮被移动工具栏覆盖时。

如果您需要一些东西来占据整个视口高度，请考虑使用height:100%（并确保height:100%在 html 和 body 标签上进行设置）。height:100%然而，如果您最终需要指定一长串嵌套的元素，如上所述，这将是一个巨大的痛苦。

如果您没有很多嵌套元素，那么使用height:100%似乎是可行的方法。否则，使用大量嵌套元素vh可以省去您的麻烦。

如果移动工具栏仍然是一个相关问题，那么您可能需要主动计算window.innerHeight。

Answer 3

高度：100vh = 视口高度的 100%

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

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

请参阅此 gist.run 以获取 Bootstrap 4.1 的示例：

Answer 4

视口单位 = vw、vh、vmin 和 vmax - 基于浏览器视口的大小。因为，它们的实际大小取决于视口大小，这使它们成为响应式设计的绝佳单位

注意：处理宽度时，%单位更合适，但处理高度时，vh单位更好。

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

视口 > html > 正文