single page body height - css

Question

within body I have sections...I expected body to get the whole height: section1.height+section2.height+... but it only gets the top sections height.what am I missing? 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

You are looking for min-height on your html and body. Using height: 100% makes the html and body height wrap around all of your content up to the height of the screen/viewport. Using min-height: 100% makes the html and body height equal at least the height of the screen/viewport, and can also expand downward to fit overflowing content.
JSFiddle
html, body {
min-height: 100% !important;
width: 100% !important;
margin: 0;
padding: 0;
}
NOTE - Try to avoid using !important unless it is absolutely necessary. It will create problems down the road if/when you need to override the styling on something for a single page.

Answer 2

You can set your header section.top to the viewport height by using 100vh. Then you can remove the height: 100% of html and body, and they will stay fluid (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;
}