Sticky header with %-height and 100% content sections - html

Question

I'd like to have a sticky header with a %-height property. Sections below the header should take up the remaining height of the page, for example: header=10% all other sections are atleast 90%. This is similar to a related question: CSS Sticky Header/Footer and Fully Stretched Middle Area?, but he's using fixed px-height whereas i want %-height. I tried to use margin on my section, but that doesn't seem to work. Not does it seem to work to use a margin and 90% height on my sections.
For the moment I was able to come up with: http://jsfiddle.net/K9m63/. But a few problems:
The first section dissapears underneath the header.
Because of point 1, the section div's are too high and therefore not taking the remaining size.
HTML
<header>
<nav>Test</nav>
</header>
<section>
<div class="container yellow">1</div>
</section>
<section>
<div class="container pink">2</div>
</section>
<section>
<div class="container purple">3</div>
</section>
CSS
body, html {
height: 100%;
}
header {
height: 10%;
background-color: green;
position: fixed;
top: 0px;
width: 100%;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.nav-image {
vertical-align: middle;
}
section {
height: 100%;
width: 100%;
background-color: red;
}
.container {
width: 72.8125%;
background-color: blue;
margin: 0px auto;
height: 100%;
}
.yellow {
background-color: yellow;
}
.pink {
background-color: pink;
}
.purple {
background-color: purple;
}
Thanks!

Answer 1

Possible solution:
I have wrapped all sections into 2 divs.
<div class="wrapper">//rest 90% of the page
<div class="wrapper2">//100% of parent
<section>
<div class="container yellow">1</div>
</section>
<section>...
</div>
</div>
CSS:
.wrapper {
min-height:90%;
height:auto !important;
position:relative;
top:10%;
}
.wrapper2 {
height:100%;
width:100%;
position:absolute;
}
Also, add z-index:1; to header.
Updated fiddle here.

Answer 2

Based on your drawing, this is how you could* do it. - but there's also "fixed" / or "Sticky" positioning. - and this layout would force you to implement your own scroll below - in the page content, which is a pain.
html, body {
height: 100vh; /* you can use vh or % - but either way... */
height: 100%; /* they don't know their own height... how would they? */
}
body {
margin: 0;
}
.site-header {
background: #ff6666;
height: 10%;
}
.page-content {
background: #6666ff;
height: 90%;
}
<header class="site-header">
header
</header>
<main class="page-content">
main
</main>