CSS 视口 height:100vh 无法正确处理 div 中的内容

Question

我是新来注册的，因为我在现有的步骤中找不到我的答案。

我正在尝试制作一个单页网站，我希望 'landing page' 具有完整的背景。我在整个页面上都有背景，但是当我开始在 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;
}

与以下 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>

你可以在这里看到结果：http://codepen.io/Luchadora/full/waYzMZ 或者看我的笔：http://codepen.io/Luchadora/pen/waYzMZ

如您所见，在定位介绍文本 (p.hello {margin: 30px;} 时，背景大小发生了变化，不再是全屏。（顺便说一句：我使用了示例背景）。其他页面现在也有空白..

我该如何解决这个问题？我读过有关视口的文章，但我认为为此我唯一需要的是 height: 100vh;，对吗？提前致谢！

Answer 1

你的问题是 margin collapsing:

Parent 和 first/last child
如果没有边框、填充、内联内容或将块的 margin-top 与其第一个 child 块的 margin-top 分开的间隙，或者没有边框、填充、内联内容，高度、min-height 或 max-height 将一个块的 margin-bottom 与其最后一个 child 的 margin-bottom 分开，然后这些边距会崩溃。折叠的边距最终在 parent.

之外

要解决您的问题，请向 .text-center 添加一些填充：

.text-center {padding:1px;}

Updated pen

Answer 2

您没有禁用正文的边距。将此添加到您的 CSS

body{
  margin:0px;
}

编辑：Pete 发布的答案似乎是完整的解决方案，抱歉太慢了！

Answer 3

这已经在上面的谈话中说过了，但它对我有用，我希望人们很容易找到它。

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

CSS 视口 height:100vh 无法正确处理 div 中的内容

CSS viewport height:100vh doesn't work correctly with content in the div

html

css

height

viewport