3 行布局，总计 min-height：100%

Question

我想实现如下所示的 3 行布局：

内容显示在中间一行。没有内容，它只有屏幕顶部的固定高度 header 和底部的固定高度页脚。中间一行是空的，填满了 window.

的剩余高度

随着内容的增加，中间一行变大。当它达到最大尺寸时，总布局尺寸会增加，因此用户现在必须滚动才能看到下方的内容和页脚。

我设法用 tables 做到了：

http://jsfiddle.net/v73c4L7n/8/（内容很多） http://jsfiddle.net/v73c4L7n/9/（内容少）

HTML

<table class="main">
    <tr><td>HEADER</td></tr>
    <tr class="middle">
        <td>
            <div class="area">
                <p>Content</p>
                <p>Content</p>
            </div>
        </td>
    </tr>
    <tr><td>FOOTER</td></tr>
</table>

CSS

body, html {
    height: 100%;
    padding:0;
    margin:0;
}

.area {
    position: relative;
    width: 300px;
    background-color: green;
    margin: 0px auto;
    min-height: 100%;
    height: 100%;
}

.main {
    height: 100%;
    width: 100%;
}

.main tr:first-child, .main tr:last-child {
    height: 50px;
}

问题是，它似乎在 IE9 或 IE10 中不起作用。我认为，问题是 table 单元格内 .area 的 height:100%，没有明确的高度。

所以我想知道是否有更好的方法来实现这种布局。

Answer 1

您是否也尝试过将 .middle height 设置为 100%？

这样，.middle <tr> 将占据剩余的位置，其他 <tr> 将根据其内容扩展。

http://jsfiddle.net/v73c4L7n/10/（适用于最新的浏览器。

已更新CSS：

body, html {
    height: 100%;
    padding:0;
    margin:0;
}
.area {
    width: 300px;
    background-color: green;
    margin: 0px auto;
    min-height: 100%;
    height: 100%;
    padding:1px
}
.main {
    table-layout: fixed;
    border-collapse: collapse;
    background-color: red;
    height: 100%;
    width: 100%;
}
.main .middle > td {
    background-color: yellow;
    width: 100%;
}
.main tr:first-child, .main tr:last-child {
    height: 50px;
}
.main tr:first-child > td {
    width: 100%;
    background-color: rgba(0,0,255,0.5);
}
.main tr:last-child > td {
    width: 100%;
    background-color: rgba(0,0,255,0.5);
}
.middle {
    height:100%;
}

它也适用于 display:table 和 header、main 和 footer 等常规标记元素。 http://jsfiddle.net/v73c4L7n/13/

Display:flex; 让事情变得更简单：http://jsfiddle.net/v73c4L7n/14/

display:table 自 IE8 起被理解，自 IE10 起 flex :(

Answer 2

如果可以，请使用 div 而不是表格。我会使用 calc(expression) 得到 100% 的高度减去页脚和页眉的总和。看这里在fiddle。如果您删除内容 div 中的某些段落，您会看到它会将页脚移动到页面底部，即使没有内容也是如此。

JSFiddle

HTML

<div id="wrapper">

<div id="header">
    HEADER
</div>

<div id="content">
    <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
    <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
    <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
    <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
    <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
</div>

<div id="footer">
    FOOTER
</div>

CSS

html, body {
    background-color:yellow;
    height:100%;
}

* {
    margin:0;
    padding:0;
}

#wrapper {
    height:100%;
    margin: 0 auto;
}   

#header{
    height: 50px; 
    width: 100%;
    background-color:purple;
}

#content {
    background-color:green; 
    min-height: -moz-calc(100% - 100px); /* Firefox */
    min-height: -webkit-calc(100% - 100px); /* Chrome, Safari */
    min-height: calc(100% - 100px); /* IE9+ and future browsers */
    width:300px;
    margin:0 auto;
}

#footer {
    height: 50px; 
    width:100%; 
    background-color:purple;
}

3 行布局，总计 min-height：100%

3 rows layout, with total min-height: 100%

css

layout