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

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

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

解决方法

我打算为此付出代价,但这听起来像是一张桌子的工作.

你要做的是将三个连续div的总高度设置为一个单位,高度为100％的1×3表实际上是一个更清洁的解决方案.

原文地址：https://www.jb51.cc/html/225802.html