CSS:当父级已经是 100% 时，使内部 div 的高度为 100%

Question

我已经自己尝试了很长时间，到目前为止我阅读和搜索过的所有帖子都没有帮助我，所以我希望你们中的一个能给我一个提示:

我有一个由页眉、页脚和内容组成的布局。这种布局在整个页面的高度上延伸(这已经花了我一段时间才弄清楚)。到目前为止，一切都很好。但现在我想尽可能地向下拉伸(stretch) content-div，直到页脚的开头。无论我做什么，它都不起作用，它要么保持其中文本的长度，要么变成整个窗口的大小，隐藏页脚并生成滚动条。我读到了一个使它成为 position:absolute 的解决方案，但我不想要那个。

示例如下:http://jsfiddle.net/N9Gjf/1/

你真的会帮助我!

这是CSS:

html, body {
    height:100%;
    text-align:center;
}

#wrapper {
    min-height:100%;
    height:100%
    overflow: hidden;
    width:800px;
    margin: 0 auto;
    text-align: left;
    background-color:lightblue;
}   

#footer {
    background-color: silver;
    height:1.5em;
    width:800px;
    margin: -1.5em auto;
}

#header {
    background-color: orange;
    height:100px;
}

#content {
    background-color: limegreen;
}

* {
    margin:0;
    padding:0;
}

这是 html:

<div id="wrapper">

    <div id="header">
        <p>Header</p>
    </div>
    <div id="content">
    INHALT  
    </div>

</div>

<div id="footer">
    <p>Footer</p>
</div>

Answer 1

http://jsfiddle.net/calder12/CprV7/

包装器中的高度后缺少分号。您还想将内容的高度和最小高度设置为 100%。

#wrapper {
min-height:100%;
height:100%;
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue;
}

#content {
background-color: limegreen;
height:100%;
min-height:100%;
}