css - 动态和固定 div 高度

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/，带有 jQ​​uery 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;
}