【问题标题】:Vertical div with scroll fill all available vertical space带有滚动的垂直 div 填充所有可用的垂直空间
【发布时间】:2012-06-20 09:36:14
【问题描述】:

我想创建这样的布局:

+-----------容器-----------+
| +-----fixed-height-div------+|
| +-------固定高度-div-----+|
| +-fill-height-scrollable-div-+|
| +-固定高度-底部-div-+|
+---------end-container--------+

问题是如何使 fill-height-scrollable-div 适应所有可用空间。有关更多详细信息,请参见示例。

这里是一个例子:http://jsfiddle.net/SkeLLLa/fz2C7/

是否有任何 not javascript 方法来设置 div.chat-user-list-cnt 以适应所有可用高度并使 div.chat-bot- btns-cnt 贴在 div.chat-list 的底部?

【问题讨论】:

    标签: css html


    【解决方案1】:

    在您的演示中,除了“可滚动的 div”之外,所有东西都有固定的高度,并且您的外部 div 是绝对定位的(嗯,position: fixed,但足够接近)。

    您需要做的是利用您可以在“可滚动div”上设置例如position: absolute; top: 50px; bottom: 50px这一事实。

    参见:http://jsfiddle.net/thirtydot/UPG6A/(简化版)

    【讨论】:

    • 如果一个或两个顶部固定 div 具有动态高度怎么办?