web-dev-qa-db-ja.com

CSSビューポートの高さ：100vhがdiv内のコンテンツで正しく機能しない

既存のトレッドで答えが見つからなかったので、ここで新しく登録しました。

1ページのWebサイトを作成しようとしていますが、「ランディングページ」に完全な背景を持たせたいと考えています。ページ全体に背景がありましたが、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;だけだと思います。前もって感謝します！

htmlcssheightviewport
6
Luchadora

あなたの問題は マージンの崩壊 にあります：

親と最初/最後の子
ブロックのマージン上部と最初の子ブロックのマージン上部を分離するための境界線、パディング、インラインコンテンツ、またはクリアランスがない場合、または境界線、パディング、インラインコンテンツ、高さ、最小値がない場合-height、またはmax-heightは、ブロックのmargin-bottomを最後の子のmargin-bottomで分離し、それらのマージンは折りたたまれます。折りたたまれたマージンは、親の外側になります。

問題を解決するには、.text-centerにパディングを追加します。

.text-center {padding:1px;}

更新されたペン

3
Pete

体のマージンを無効にしていません。これをCSSに追加します

body{
  margin:0px;
}

編集：ピートが投稿した答えは完全な解決策のようです、申し訳ありませんが遅すぎました！

0
Luuk van Aggelen