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

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

我有一个由页眉、页脚和内容组成的布局。这种布局在整个页面的高度上都很凌乱（我花了一段时间才弄清楚）。到目前为止，一切顺利。但是现在我想把

content div尽量向下延伸，一直延伸到页脚的开头。无论我做什么，它都不起作用，它要么保持文本的长度，要么变成整个窗口的大小，隐藏页脚并生成一个滚动条。
我读到一个解决方案，使它成为
position:absolute
，但我不想这样

以下是一个例子：

你真的会帮我的

以下是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>


标题

吸入
页脚


包装中的高度后缺少分号。您还需要将内容的高度和最小高度设置为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%;
}

现在它可以正常工作了。您的包装器有一个错误：

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

你忘了放一个
在
高度的末尾：100%

试试看，你会发现它会起作用。
我认为相对绝对定位是最好的解决方案（我承认我无法找到一种方法使高度总和达到100%）。以下是您需要做的：


使包装器位置相对
将所有div放入包装器中
使用绝对定位来定位和调整内容和页脚的大小；使用以下选项之一：
不要指定div的
高度
；指定
顶部
和
底部
指定
顶部
或
底部
，但不能同时指定两者；指定高度

另一种方法是使用负边距。这可能是一个脑筋急转弯，但一旦你掌握了这个想法，它就会变得比定位简单得多。以下是您需要做的：


为页眉和页脚指定高度
为内容指定100%高度
在内容上使用负边距，以便（i）内容将自身推到页眉上（ii）将页脚推到自身上
使用z索引定位将标题置于内容的“前面”
使用padding div将内容放入content div中标题下方
您的css在
高度：100%
附近有一个打字错误。添加一个分号，也许你的问题会自行解决。不完全是这样，他也需要在内容中添加高度。只是再看一下代码，添加缺少的
似乎可以修复所有问题，但它不能！当然不是。他在内容上没有设定高度。我在将近5分钟前回答了这个问题……为什么要设置
min height
和
height
？当然只要
min height
就足够了吗？旧的兼容性习惯，现在可能完全没有必要了，但它仍然坚持着我。该死的！我以前在内容定义中确实有一些东西，但因为不起作用而删除了它。我肯定有身高：100%也有。也许里面还有其他一些东西干扰了它，因为它使绿色内容框在整个窗口中占据了100%的比例，正如所解释的那样。谢谢你这么多想！这真的困扰了我一整天。也感谢所有其他的帮助者！我很感激！如果#内容有很多内容怎么办？它将下降到页脚上方或下方，打破布局
#wrapper {
    min-height:100%;
    height:100%;
    overflow: hidden;
    width:800px;
    margin: 0 auto;
    text-align: left;
    background-color:lightblue;
}