私は、3つの異なるdiv:ヘッダー、コンテンツ、およびフッターを含むdivを作成しようとしています。ヘッダーとフッターには固定divがあり、コンテナdivの上部と下部に配置されています。コンテナdivのサイズが変更されたときに、コンテナの残りのスペースに対応するoverflow:autoおよびmax-heightを使用して、コンテンツは残っている使用可能なスペースを満たし、動的に適応する必要があります。 この動作をどうすれば実現できますか?動的なdivの高さを固定
#container
#header
#body
#footer
#container {
display: table;
height: 300px;
width: 300px;
}
#container #header {
background: #888;
height: 30px;
width: 100%;
display: table-row;
}
#container #body {
background: #777;
display: table-row;
height: 100%;
max-height: 100%;
overflow: auto;
width: 100%;
}
#container #footer {
background: #888;
display: table-row;
height: 30px;
width: 100%;
}
これは私がすでに持っているものです。ここでの問題は、#bodyがmax-heightパラメータを受け入れず、内容に応じてサイズを変更することです。 デモhttp://jsfiddle.net/deHvH/1/、jQuery UIサイズ変更可能http://jsfiddle.net/deHvH/2/
EDIT:フレックスボックスモデルは必要なものです。
あなたが既に持っているコードを入力してください。 – Albert
私はちょうど私の質問を編集しました。 –