将 HTML 和 BODY 选择器样式设置为高度：100%；与使用 100vh
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27612931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling HTML and BODY selector to height: 100%; vs using 100vh
提问by Medri
My brother and I were messing around in sublime earlier and he suddenly shout out, "I learned something new!"
我哥哥和我之前在 sublime 里胡闹，他突然喊道：“我学到了新东西！”
A little shocked, I asked, "What's that..?"
我有点吃惊，问道：“那是什么……？”
He replied, "Viewport height! I started in I.E.6 when it wasn't fully supported and never really looked at it again." He then proceeded to show me.
他回答说：“视口高度！我开始使用 IE6 时，它没有得到完全支持，并且再也没有真正看过它。” 然后他继续给我看。
To which I replied, "I accomplished the same thing here." and showed him another sandbox project I messed around with.
我回答说：“我在这里完成了同样的事情。” 并向他展示了我搞砸的另一个沙箱项目。
In my project, in the CSS, I wrote
在我的项目中，在 CSS 中，我写了
(edit: I edited to put the background color in the div, not the html or body, my mistake)
（编辑：我编辑将背景颜色放在 div 中，而不是 html 或正文中，我的错误）
(jsfiddle http://jsfiddle.net/nvLq8eg9/embedded/result/)
（jsfiddle http://jsfiddle.net/nvLq8eg9/embedded/result/）
html, body {
height: 100%;
}
div {
height: 100%;
background: green;
}
his code is, (jsfiddle http://jsfiddle.net/nvLq8eg9/1/embedded/result/)
他的代码是，（jsfiddle http://jsfiddle.net/nvLq8eg9/1/embedded/result/）
div {
height: 100vh;
background: green;
}
Both did virtually the same thing. After doing some research on here, it appears as if the commonly run in to issue via the former method is the inability to scroll; however, on my sandbox project I had more content in it and was able to scroll and interact with the website normally.
两者几乎都做了同样的事情。在这里查了一些资料，好像前一种方法经常遇到的问题是无法滚动；然而，在我的沙箱项目中，我有更多的内容，并且能够正常滚动和与网站交互。
Neither of us were able to determine what the differences were between both methods. Would anyone on here be able to educate us?
我们都无法确定两种方法之间的差异。这里有人可以教育我们吗？
Thank you!
谢谢！
回答by sodawillow
height: 100vh= 100% of the viewport height
height: 100vh= 100% 视口高度
height: 100%= 100% of the parent's element height
height: 100%= 父元素高度的 100%
That is why you need to add height: 100%on htmland body, as they don't have a size by default
这就是为什么你需要添加height: 100%的html和body，因为他们不具有的大小为默认
Something you have to know : if you use % for vertical margin or padding, % will be calculated on the widthof the parent element, not the height.
您必须知道的一些事情：如果您将 % 用于垂直边距或填充，则 % 将根据父元素的宽度而不是高度来计算。
Tip : try using vh and vw units for font size :) I like this one (not supported in some browsers I know) : font-size: calc(.5vh + .5vw);(for example)
提示：尝试使用 vh 和 vw 单位作为字体大小:) 我喜欢这个（我知道的某些浏览器不支持）：（font-size: calc(.5vh + .5vw);例如）
See a nice page here for CSS units : http://css-tricks.com/the-lengths-of-css/
在这里查看 CSS 单元的一个不错的页面：http: //css-tricks.com/the-lengths-of-css/
回答by Greg Gum
height: 100vh = 100% of the viewport height
高度：100vh = 视口高度的 100%
Technically, this is true, but a better way to think of it is = 100% of the available height.
从技术上讲，这是正确的，但更好的思考方式是 = 可用高度的 100%。
If you are looking to fill up a div with the available height, that's a mighty useful trick. Before I learned this, I would have to ensure every div from html down to the nested div had a height of 100% which can be tedious and error prone. Instead, I now just use height:100vh on the nested item.
如果您想用可用高度填充 div，这是一个非常有用的技巧。在我了解到这一点之前，我必须确保从 html 到嵌套 div 的每个 div 都具有 100% 的高度，这可能很乏味且容易出错。相反，我现在只在嵌套项上使用 height:100vh。
See this gist.run for an examplewith Bootstrap 4.1:
有关Bootstrap 4.1的示例，请参阅此 gist.run ：
回答by Mr. Droid
View port units = vw, vh, vmin, and vmax- are based on the size of the browser viewport. Because, their actual size changes depending on the Viewport Size, this makes them great units for responsive design
视口单位 = vw、vh、vmin 和 vmax- 基于浏览器视口的大小。因为，它们的实际大小取决于视口大小，这使它们成为响应式设计的绝佳单位
Note:When dealing with widths, the %unit is more suitable but with heights, the vhunit is better.
the width of the viewport will actually be larger than the width of the html element.
Viewport > html > body
注意：处理宽度时，%单位更合适，但处理高度时，vh单位更好。
视口的宽度实际上会大于 html 元素的宽度。
视口 > html > 正文
