假设我有一个父母DIV。内部有三个子DIV：页眉，内容和页脚。标头添加在父级的顶部，并水平填充。页脚连接到父级的底部，并且也将其水平填充。内容应该填充页眉和页脚之间的所有空间。

父级必须具有固定的宽度和高度。内容DIV必须填充页眉和页脚之间的所有可用空间。当内容DIV的内容大小超过页眉和页脚之间的空间时，内容DIV应该显示滚动条并允许适当的滚动，以使页脚内容永远不会被遮盖，也不会使页脚模糊。

现在来了困难的部分：我们事先不知道页眉和页脚的高度(例如，页眉和页脚是动态填充的)。在不使用JavaScript的情况下如何定位内容？

例子：

<div style="position : relative; width : 200px; height : 200px; background-color : #e0e0ff; overflow : hidden;">
    <div style="background-color: #80ff80; position : absolute; left : 0; right : 0; top : 0;">
    header 
    </div>
    <div style="background-color: #8080ff; overflow : auto; position : absolute;">
    content (how to position it?)
    </div>
    <div style="background-color: #ff8080; position : absolute; bottom : 0px; left :0; right : 0;">
    footer 
    </div>    
</div>

为了进一步阐明此事件，我正在尝试实现的目标布局将在业务Web应用程序中使用。父DIV将具有固定但未知的大小(例如，它将恰好是浏览器视口的大小，并由用户自行调整浏览器窗口的大小)。让我们将父DIV称为"屏幕"。

标头将包含一组过滤控件(如文本框，下拉列表和"过滤器"按钮)，如果水平空间不足(因此其高度可以随时更改以适应换行)，它们应换行到下一行。标头应始终可见，并附在"屏幕"的顶部。

页脚将包含一组按钮，例如在对话框窗口上。如果水平空间不足，这些也可以换行。页脚必须连接到"屏幕"的底部，以便始终可以访问和看到。

内容将包含"屏幕"内容，例如对话框字段等。如果字段太少，则其余内容将为"空白"(在这种情况下，页脚不应紧随内容之后开始，但仍应添加到固定尺寸的"屏幕"的底部)。如果字段太多，则内容DIV将提供滚动条来访问隐藏的控件(在这种情况下，内容DIV不能将其自身扩展到页脚下方，因为滚动条将被部分隐藏)。

我希望这能进一步澄清问题，因为我的代表人数太少而无法对意见发表评论。

解决方案

回答

绝对的定位让我们感到困惑。尝试这样的事情：

HTML：

<div id="wrapper">
 <div id="header">
  header
 </div>
 <div id="content">
  content
 </div>
 <div id="footer">
  footer
 </div>
</div>

CSS：

#wrapper {
  width: 200px;
  height: 200px;
  overflow: visible;
  background: #e0e0ff;
}
#header {
  background: #80ff80;
}
#content {
  background: #8080ff;
}
#footer {
  background: #ff8080;
}

编辑：也许我误会了，我们是否希望所有内容都适合200x200px的框，还是希望框增加其高度以适合内容？

回答

父母需要保持固定的身高吗？

<div style="position : relative; width : 200px; background-color : #e0e0ff; overflow : hidden;">
<div style="float: left; clear: left; background-color: #80ff80;">
header 
</div>
<div style="float: left; clear: left; background-color: #8080ff; overflow : auto; ">
content (how to position it?)
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
</div>
<div style="float: left; clear: left; background-color: #ff8080;">
footer 
<BR />taller
</div>

如果父母的身高是固定的，这是我所知道的最接近的方式-如果这些色块(相对于文本而言)确实很重要，而不仅仅是用于说明DIV的边界：

<div style="position : relative; width : 200px; height : 200px; background-color : #e0e0ff; overflow : hidden;">
<div style="float: left; clear: left; background-color: #80ff80; ">
header <BR .> taller
</div>
<div style="float: left; clear: left; background-color: #8080ff; overflow : auto; ">
content (how to position it?)<BR /> and another line
</div>
<div style="background-color: #ff8080; position : absolute; bottom : 0px; left :0; right : 0;">
footer <BR /> taller
</div>

回答

我将为此感到沮丧，但这听起来像是一张桌子的工作。

我们想要做的是将三个连续div的总高度设置为一个单位，而高度为100％的1x3表格实际上是一种更干净的解决方案。

回答

我们是否需要更改div的中心尺寸？如果我们只是想确保其背景(＃8080ff)出现在页眉和页脚之间，为什么不只将包含div的背景设置为＃8080ff。页眉和页脚背景将覆盖该位置，而div的其余背景将是正确的。

回答

如果可以不用滚动主要内容就可以摆脱困境，那么最好使用footerStickAlt方法来确保页脚停留在屏幕底部或者内容底部(如果内容超出屏幕底部) )。