Html CSS 视口高度：100vh 对 div 中的内容无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31607465/
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
CSS viewport height:100vh doesn't work correctly with content in the div
提问by Luchadora
I'm new here and registered because I couldn't find my answer in the existing treads.
我是新来的并注册，因为我无法在现有的踏板中找到我的答案。
I'm trying to make a one-page website, and I want the 'landing page' to have a full background. I had the background on the whole page, but when I started placing text in the div, it broke. I used the following css (sass):
我正在尝试制作一个单页网站，并且我希望“登陆页面”具有完整的背景。我在整个页面上都有背景，但是当我开始在 div 中放置文本时，它坏了。我使用了以下 css (sass)：
.intro {
color: #fff;
height: 100vh;
background: url('http://www.flabber.nl/sites/default/files/archive/files/i-should-buy-a-boat.jpg') no-repeat center center;
background-size: cover;
&--buttons {
position: absolute;
bottom: 2em;
}
}
p.hello {
margin: 30px;
}
.page1 {
color: #fff;
height: 100vh;
background: beige;
}
.page2 {
color: #fff;
height: 100vh;
background: black;
}
With the following HTML:
使用以下 HTML：
<html>
<head>
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>My title</title>
</head>
<body>
<div class="container">
<div class="row">
<div id="intro" class="intro">
<div class="text-center">
<p class="hello">
Intro text is coming soon!
</p>
<div class="col small-col-12 intro--buttons">
<p>Buttons coming here.
</p>
</div>
</div>
</div>
<div id="page1" class="col col-12 page1">
<p>Tekst test</p>
</div>
<div id="page2" class="col col-12 page2">
<p>Tekst test.</p>
</div>
</div>
</div>
</body>
</html>
You can see the result here: http://codepen.io/Luchadora/full/waYzMZOr see my pen: http://codepen.io/Luchadora/pen/waYzMZ
你可以在这里看到结果：http: //codepen.io/Luchadora/full/waYzMZ或者看我的笔：http: //codepen.io/Luchadora/pen/waYzMZ
As you see, when positioning the intro text (p.hello {margin: 30px;}, the background size changed and is not full screen anymore. (Btw: I used an example background). Also the other pages have white spaces now..
如您所见，在定位介绍文本时 ( p.hello {margin: 30px;}，背景大小发生了变化，不再是全屏了。(顺便说一句：我使用了一个示例背景)。其他页面现在也有空白..
How can I fix this? I've read articles about viewports, but I think the only thing I need for this is height: 100vh;, right? Thanks in advance!
我怎样才能解决这个问题？我读过关于视口的文章，但我认为我唯一需要的是height: 100vh;，对吧？提前致谢！
采纳答案by Pete
Your problem is with margin collapsing:
您的问题是边距折叠：
Parent and first/last child
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
父级和第一个/最后一个子级
如果没有边框、填充、内嵌内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框、填充、内嵌内容、高度、 min-height 或 max-height 将块的边距底部与其最后一个子项的边距底部分开，然后这些边距会折叠起来。折叠的边距最终位于父级之外。
To solve your problem, add some padding to .text-center:
要解决您的问题，请添加一些填充到.text-center：
.text-center {padding:1px;}
回答by Luuk van Aggelen
You have not disabled the margin of the body. Add this to your CSS
您尚未禁用正文的边距。将此添加到您的 CSS
body{
margin:0px;
}
edit: The answer Pete posted seems to be the complete solution, sorry was too slow!
编辑：Pete 发布的答案似乎是完整的解决方案，抱歉太慢了！
回答by Alexander McNulty
This was already said above in a side conversation, but it worked for me and I want people to find it easily.
这已经在上面的一次谈话中说过了，但它对我有用，我希望人们很容易找到它。
-- overflow-x:hidden; on both html, body in the css.
