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

概述假设我有父母DIV.在里面,有三个子DIV：标题,内容和页脚.标题附加到父级的顶部并水平填充.页脚附加到父级的底部并且也水平填充.内容应该填充页眉和页脚之间的所有空间. 父母必须有固定的宽度和高度.内容DIV必须填充页眉和页脚之间的所有可用空间.当内容DIV的内容大小超过页眉和页脚之间的空间时,内容DIV应显示滚动条并允许适当的滚动,以使页脚内容不应被遮挡,页脚也不会模糊内容. 现在出现了困难的部 假设我有父母div.在里面,有三个子div：标题,内容和页脚.标题附加到父级的顶部并水平填充.页脚附加到父级的底部并且也水平填充.内容应该填充页眉和页脚之间的所有空间.

父母必须有固定的宽度和高度.内容div必须填充页眉和页脚之间的所有可用空间.当内容div的内容大小超过页眉和页脚之间的空间时,内容div应显示滚动条并允许适当的滚动,以使页脚内容不应被遮挡,页脚也不会模糊内容.

现在出现了困难的部分：您事先并不知道页眉或页脚的高度(例如,页眉和页脚是动态填充的).如何在不使用JavaScript的情况下定位内容？

例：

<div >    <div >    header     </div>    <div >    content (how to position it?)    </div>    <div >    footer     </div>    </div>

为了进一步澄清此事件 – 我正在尝试实现的目标布局将用于业务Web应用程序.父div将具有固定但未知的大小(例如,它将完全是浏览器视口的大小,自定义大小以及用户调整浏览器窗口的大小).让我们将父div称为“屏幕”.

标题将包含一组过滤控件(如文本框,下拉列表和“过滤器”按钮),如果没有足够的水平空间(因此它的高度可以随时改变以适应换行),它应该换行到下一行.标题应始终可见并附加到“屏幕”的顶部.

页脚将包含一组按钮,如对话框窗口.如果水平空间不足,这些也可以换行到下一行.页脚必须连接到“屏幕”的底部,以便始终可以访问和查看.

内容将包含“屏幕”内容,如对话框字段等.如果字段太少,其余内容将为“空白”(在这种情况下,页脚不应该在内容之后立即开始,但仍然附加到“屏幕”的底部是固定大小的).如果字段太多,则内容div将提供滚动条以访问隐藏控件(在这种情况下,内容div不得在页脚下方延伸,因为滚动条将被部分隐藏).

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

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

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

总结

以上是内存溢出为你收集整理的html – 如何定位DIV以填充标题DIV和页脚DIV之间的所有可用空间？全部内容，希望文章能够帮你解决html – 如何定位DIV以填充标题DIV和页脚DIV之间的所有可用空间？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。