最小高度为100％的html元素的子项（具有相对位置）不适用于高度为100％

Question

我正在建立一个网站，其标题覆盖浏览器窗口高度的100％。 当我将html元素的高度设置为100％时，这没有问题。

但是，由于我在网站上也有CSS覆盖层，因此我需要将html-element设置为min-height：100％，以便在滚动页面时覆盖层可以拉伸整个页面。

但是，当我将html-element设置为min-height：100％时，标头的高度减小为标头的唯一子元素的高度，并具有相对位置和固定高度。

如果我将标头设置为绝对定位，它也可以工作，但是我不想那样做，因为它弄乱了网站其余部分的位置（我设计的位置是在标头下方开始，而不是在标头下方开始。

我整理了一个小提琴来说明我的问题：

<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显示问题

鉴于上述局限性，有人可以解决吗？

任何帮助深表感谢！

Answer 1

从body移开relative position

演示http://jsfiddle.net/LLkfbb2x/2/

Answer 2

min-height：100vh（或）您想要的高度（以像素为单位）？

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

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