最小高度為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/