Question

我正在尝试创建一个包含3个不同div的div：标题，内容和页脚。页眉和页脚有固定的div，位于容器div的顶部和底部。内容应填充剩余的可用空间，并在调整容器div的大小时动态调整，并使用overflow：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/，jQuery UI Resizable http://jsfiddle.net/deHvH/2/

编辑：我需要的是flexbox模型。

Answer 1

您可以使用以下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%;
}

这是否解决了您的问题？

Answer 2

我需要的是flexbox模型！

#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;
}

动态和固定的div高度

2 个答案: