动态和固定 div 高度答案

【问题标题】：Dynamic and fixed div heights动态和固定 div 高度
【发布时间】：2012-04-26 12:25:52
【问题描述】：

我正在尝试创建一个包含 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 可调整大小 http://jsfiddle.net/deHvH/2/

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

【问题讨论】：

请提供您已有的代码。

标签： css dynamic html height fixed

【解决方案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%;
}

这解决了您的顾虑吗？

【讨论】：

【解决方案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;
}

【讨论】：