Question

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

我有一个由页眉，页脚和内容组成的布局。这个布局在整个页面上高高耸立（这已经花了我一段时间才弄明白）。到现在为止还挺好。但是现在我希望将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%;
}

Answer 2

我认为相对绝对定位是最好的解决方案（我承认我无法找到将高度总和达到100％的方法）。以下是您需要做的事情：

Demo #1

使包装器位置相对
将所有div放入包装器
使用绝对定位来定位和调整内容和页脚大小;使用以下之一：
1. 不要指定div的height;指定top和bottom
2. 指定top或bottom，但不指定两者;指定height

替代方法是使用负边距。这可能是一个大脑扭转，但一旦你掌握了这个想法，它就会变得比定位更简单。以下是您需要做的事情：

Demo #2

为页眉和页脚指定高度
为内容指定100％的高度
在内容上使用负边距，以便（i）内容将自己推到标题上（ii）将页脚拉过自身
使用z-index定位将标题置于内容的“前端”
使用填充div将内容div中的内容推送到标题

Answer 3

#wrapper {
    min-height:100%;
    height:100%; /*missed the semicolon here*/
    overflow: hidden;
    width:800px;
    margin: 0 auto;
    text-align: left;
    background-color:lightblue; position:relative
}

现在可以使用 DEMO

Answer 4

包装器出错：

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

您忘记在;的末尾添加height:100%。

尝试一下，你会发现它会起作用

CSS：当父元素已经100％时，使内部div的高度为100％

4 个答案: