4

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

我有一个由页眉、页脚和内容组成的布局。这种布局在整个页面的高度上延伸（我已经花了一段时间才弄清楚）。到现在为止还挺好。但现在我想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>
4

4 回答 4

5

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%;
}
于 2012-10-22T11:26:02.277 回答
2

我认为相对绝对定位是最好的解决方案（我承认我无法找到使高度总和达到 100% 的方法）。这是您需要做的：

演示#1

  1. 使包装器位置相对
  2. 将所有 div 放入包装器中
  3. 使用绝对定位来定位和调整内容和页脚；使用以下方法之一：
    1. 不要指定heightdiv；指定top和bottom
    2. 指定一个top或bottom两个，但不能同时指定；指定height

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

演示#2

  1. 为页眉和页脚分配高度
  2. 为内容分配 100% 高度
  3. 在内容上使用负边距，以便 (i) 内容将自身推到页眉之上 (ii) 将页脚拉到自身之上
  4. 使用 z-index 定位将标题放在内容的“前面”
  5. 使用填充 div 将内容推送到标题下方的内容 div 中
于 2012-10-22T11:45:14.787 回答
0 
#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
}

现在它工作演示

于 2012-10-22T11:27:32.587 回答
0

包装器有错误：

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

你忘了把 a;放在height:100%.

试试看，你会发现它会起作用

于 2012-10-22T11:28:43.680 回答