単一ページ本体の高さ

Question

私はセクションを持っている...私は、全体の高さ取得するために身体を期待：section1.height + section2.height + ...をそれだけでトップセクション高さを取得します何が欠けていますか？ jsfiddle

<!-- Header --> 
<section id="top"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-lg-12">header</div> 
    </div> 
    </div> 
</section> 

<!--mission--> 
<section id="mission" class="mission"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-lg-12">mission</div> 
    </div> 
    </div> 
</section> 

<!-- contact --> 
<section id="contact" class="contact"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-lg-12">contact</div> 
    </div> 
    </div> 
</section> 

Answer 1

あなたのhtmlと体にmin-heightを探しています。 height: 100%を使用すると、すべてのコンテンツをHTMLと本文の高さで囲みます。までは画面/ビューポートの高さになります。 min-height: 100%を使用すると、htmlとbodyの高さがと等しくなり、画面/ビューポートの高さは少なくともになります。また、オーバーフローするコンテンツに合わせて下に拡張することもできます。

JSFiddle

html, body { 
    min-height: 100% !important; 
    width: 100% !important; 
    margin: 0; 
    padding: 0; 
} 

NOTE - それは絶対に必要でない限り!importantを使用しないようにしてください。 1つのページで何かのスタイリングをオーバーライドする必要がある場合は、問題が発生します。

Answer 2

100vhを使用すると、ヘッダsection.topをビューポートの高さに設定できます。そして、あなたはhtmlとbodyのheight: 100%を削除することができ、それらは、流体（fiddle）に滞在します：

html,body{ 
    margin:0; 
    padding:0 ; 
} 
#top { 
    width: 100%; 
    height: 100vh; 
    background: #802818; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
}