html - 最小高度为 100% 的 html 元素的子元素(具有相对定位)不应用高度 100%

Question

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

但是，由于我在网站上也有 CSS 叠加层，因此我需要将 html 元素设置为 min-height: 100% 以便在滚动页面时叠加层拉伸(stretch)整个页面。

但是，当我将 html-element 设置为 min-height: 100% 时，header 的高度将减小到具有相对定位和固定高度的 header 的唯一子元素的高度。

如果我将页眉设置为绝对定位，它也可以工作，但我不想那样做，因为它会弄乱网站其余部分的定位(我设计的是从页眉下方开始，而不是后面.

我整理了一个 fiddle 来说明我的问题:

<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 showing the problem

鉴于上述限制，有没有人知道是否有可能解决这个问题？

非常感谢任何帮助!

Answer 1

从 body 中移除 relative position

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