小编Luc*_*ora的帖子

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 …

Run Code Online (Sandbox Code Playgroud)

html height viewport css3

Luc*_*ora

2015 07-24

6
推荐指数

1
解决办法

2万
查看次数