当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《如何定位DIV以填充标题DIV和页脚DIV之间的所有可用空间?》经验,为你挑选了0个好方法。

假设我有父DIV.在里面,有三个子DIV:标题,内容和页脚.标题附加到父级的顶部并水平填充.页脚连接到父级的底部并且也水平填充.内容应该填充页眉和页脚之间的所有空间.

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

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

例:

header
content (how to position it?)
footer

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

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

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

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

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

推荐阅读
小色米虫_524
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有