0

ヘッダー、コンテンツ、フッターの3つの異なるdivを含むdivを作成しようとしています。ヘッダーとフッターには固定divがあり、コンテナーdivの上部と下部に配置されています。コンテンツは残りの使用可能なスペースを埋め、コンテナーdivのサイズが変更されると動的に適応し、オーバーフローが発生します。autoとmax-heightはコンテナーの残りのスペースに対応します。どうすればこの動作を実現できますか？

#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/、jQueryUIのサイズ変更可能http://jsfiddle.net/deHvH/2/

編集：フレックスボックスモデルは私が必要としていたものです。

4

2 に答える 2

0

次のCSSを使用して、それに応じて最大高さを調整できます。

#container {
    height: 300px;
    width: 300px;
}

#container #header {
    background: #888;
    height: 30px;
    width: 100%;
}

#container #body {
    background: #777;
    max-height: 200px;
    overflow: auto;
}

#container #footer {
    background: #888;
    height: 30px;
    width: 100%;
}

これで懸念は解決しましたか？

于 2012-04-14T12:42:37.080 に答える
0

フレックスボックスモデルは私が必要としていたものでした！

#container {
    display: table;
    height: 300px;
    width: 300px;
    display: box;
}

#container #header {
    background: #888;
    height: 30px;
}

#container #body {
    background: #777;
    box-flex: 1;
    overflow: auto;
}

#container #footer {
    background: #888;
    height: 30px;
}
于 2012-04-26T17:55:53.900 に答える