Criança (com posicionamento relativo) de elemento html com min-height 100% não aplica altura 100% - html, css

Eu estou construindo um site com um cabeçalho que cobre 100% da altura da janela do navegador. Isso funciona sem problemas quando eu configuro o elemento html com height: 100%.

No entanto, como também tenho uma sobreposição de CSS no site, preciso definir o elemento html como min-height: 100% para que a sobreposição estique a página inteira quando a página for rolada.

Mas quando eu defino o elemento html para min-height: 100%, a altura do cabeçalho é reduzida para a altura do único elemento filho do cabeçalho com posicionamento relativo e altura fixa.

Também funciona se eu definir o cabeçalho com absolutoposicionamento, mas eu não quero ir por esse caminho porque atrapalha o posicionamento do resto do site (que eu projetei para começar abaixo do cabeçalho, não para trás.

Eu coloquei um violino para ilustrar o meu problema:

<header id="header">
<div class="header-head">I am the header head</div>
<div class="header-content">I am the header content</div>
<div class="header-footer">I"m the header footer!</div>
</header>

<div class="content">
<h1>This is the page content</h1>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint blanditiis perspiciatis nesciunt possimus minus molestiae culpa necessitatibus atque ut eveniet id magnam delectus reprehenderit! Ad atque aperiam rerum quas vitae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit esse nihil iusto ea natus aliquam enim ducimus deleniti vitae quibusdam
</div>

html, body {
margin: 0;
height: 100%;
}

body {
font-family: "Open Sans", sans-serif;
color: black;
position: relative;
height: 100%;
width: 100%;
}

#header {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
position: relative;
}

.header-head {
width: 100%;
height: 68px;
background-color: green;
position: absolute;
text-align: center;
}

.header-content {
width: 100%;
height: 15%;
top: 30%;
background-color: blue;
position: absolute;
text-align: center;
}

.header-footer {
width: 100%;
height: 20%;
position: absolute;
bottom: 0;
left: 0;
background-color: red;
text-align: center;
}

.content {
margin: 30px;
}

h1 {
font-family: "Federo", sans-serif;
}

JSFiddle mostrando o problema

Alguém tem uma idéia se é possível resolver isso, dadas as limitações descritas acima?

Qualquer ajuda é muito apreciada!

Respostas:

Remover relative position a partir de body

DEMO http://jsfiddle.net/LLkfbb2x/2/

min-height: 100vh (ou) qualquer altura em pixels que você deseja ter?

html, body {
margin: 0;
min-height: 100vh;
}

http://jsfiddle.net/LLkfbb2x/1/