如何定位DIV以填充标题DIV和页脚DIV之间的所有可用空间？

Question

假设我有父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不得在页脚下方延伸,因为滚动条将被部分隐藏).

我希望这可以进一步澄清这个问题,因为我的代表太低,无法为你的回复输入评论.

Answer 1

绝对定位会让你陷入困境。尝试这样的事情：

HTML：

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

CSS：

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

编辑：也许我误解了，您是否希望所有内容都适合 200x200px 的盒子，还是希望盒子增加其高度以适应内容？