css - 带有滚动的垂直 div 填充所有可用的垂直空间

Question

我想创建这样的布局：

+-----------集装箱-----------+
| +-----固定高度-div-------+|
| +-------固定高度------+|
| +-填充高度-可滚动-div-+|
| +-固定高度-底部-div-+|
+---------端容器-------+

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

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

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

Answer 1

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

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

见： http: //jsfiddle.net/thirtydot/UPG6A/（简化版）