用％-height和100％内容区段粘头

Question

我想有一个％-height特性粘头。标题下方部分应该占用页的剩余高度，例如：标题= 10％的所有其它部分是ATLEAST 90％。这类似于一个相关的问题：CSS Sticky Header/Footer and Fully Stretched Middle Area?，但他使用固定的像素高度，而我想要％-height。我试图用保证金在我的部分，但似乎并没有工作。没有它似乎工作使用保证金和90％的高度上我的部分。

目前我能想出：http://jsfiddle.net/K9m63/。但是有几个问题：

1. 第一部分自败的标题的下面。
2. 由于点1，部分div的太高，因此不考虑剩余大小。

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;
}

谢谢！

Answer 1

可能的解决方法：

我已经包裹的所有部分成2周的div。

<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;
}

此外，添加z-index:1;到header。

这里更新fiddle。

Answer 2

根据您的图纸，这就是你怎么可能*做到这一点。 - 但也有“固定” /或“粘性”的定位。 - 这布局将迫使你实现你在下面自己的滚动 - 在页面内容，这是一种痛苦。

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>