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

Question

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

我是新来的并注册,因为我无法在现有的步骤中找到答案.

我正在尝试创建一个单页网站,我希望"目标网页"具有完整的背景.我在整个页面上都有背景,但是当我开始在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;
}

Run Code Online (Sandbox Code Playgroud)

使用以下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>

Run Code Online (Sandbox Code Playgroud)

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

正如您所看到的,在定位介绍文本时(p.hello {margin: 30px;}背景大小已更改并且不再是全屏幕.(顺便说一句:我使用了示例背景).其他页面现在还有空白区域.

我怎样才能解决这个问题？我读过关于视口的文章,但我认为我唯一需要的是height: 100vh;,对吧？提前致谢!

Answer 1

Pet*_*ete 2

您的问题是边距崩溃：

父级和第一个/最后一个子级
如果没有边框、填充、内联内容或间隙来分隔块的 margin-top 与其第一个子块的 margin-top，或者没有边框、填充、内联内容、高度、 min-height 或 max-height 将块的 margin-bottom 与其最后一个子块的 margin-bottom 分开，然后这些边距折叠。折叠的边距最终位于父级之外。

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

.text-center {padding:1px;}

Run Code Online (Sandbox Code Playgroud)

更新了笔

归档时间：	10 年，4 月前
查看次数：	21283 次
最近记录：	9 年，11 月前