CSS视口高度：100vh无法正常使用div中的内容

Question

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. 我在整个页面上都有背景，但是当我开始在div中放置文本时，它就破了。 I used the following css (sass): 我使用了以下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/waYzMZ Or 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; 我读过关于视口的文章，但我认为我唯一需要的是height: 100vh; , right? ，对？ Thanks in advance! 提前致谢！

Answer 1

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. 折叠的保证金最终在父母之外。

To solve your problem, add some padding to .text-center : 要解决您的问题，请在.text-center添加一些填充：

.text-center {padding:1px;}

Updated pen 更新了笔

Answer 2

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发布的答案似乎是完整的解决方案，抱歉太慢了！

Answer 3

这已在上面的一个侧面谈话中说过，但它对我有用，我希望人们能够轻松找到它。

-- overflow-x:hidden; on both html, body in the css.

CSS视口高度：100vh无法正常使用div中的内容

问题描述

3 个解决方案

解决方案1
4 已采纳 2015-07-24 10:06:26

解决方案2
0 2015-07-24 10:14:42

解决方案3
-1 2015-12-23 08:51:18

CSS视口高度：100vh无法正常使用div中的内容

问题描述

3 个解决方案

解决方案1 4 已采纳 2015-07-24 10:06:26

解决方案2 0 2015-07-24 10:14:42

解决方案3 -1 2015-12-23 08:51:18

解决方案1
4 已采纳 2015-07-24 10:06:26

解决方案2
0 2015-07-24 10:14:42

解决方案3
-1 2015-12-23 08:51:18