css - スクロール付きの垂直 div は、使用可能なすべての垂直スペースを埋めます

Question

私はそのようなレイアウトを作成したい:

+----------コンテナ-----------+
| +-----fixed-height-div-------+|
| | +------fixed-height-div-----+|
| | +-fill-height-scrollable-div-+|
| | +-fixed-height-bottom-div-+|
+---------エンドコンテナ-------+

問題は、使用可能なすべてのスペースに合わせてfill-height-scrollable-divを作成する方法です。詳細については、例を参照してください。

例を次に示します: http://jsfiddle.net/SkeLLLa/fz2C7/

div.chat-user-list-cntを使用可能なすべての高さに合わせて設定し、 div.chat-bot-btns-cntをdiv.chat-listの下部に固定するJavaScript以外の方法はありますか?

Answer 1

デモでは、「スクロール可能な div」を除くすべての高さが固定されており、外側の div は絶対に配置されています (まあ、position: fixed十分に近い)。

あなたがする必要があるのは、たとえばposition: absolute; top: 50px; bottom: 50px「スクロール可能なdiv」に設定できるという事実を利用することです。

参照: http://jsfiddle.net/thirtydot/UPG6A/ (簡易版)