带有滚动的垂直 div 填充所有可用的垂直空间答案

【问题标题】：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 具有动态高度怎么办？