Question

我想实现一个行为如下的3行布局：

内容显示在中间行。没有内容，它只有屏幕顶部的固定高度标题和底部固定的高脚注。中间行为空，填满了窗口的剩余高度。

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

我设法用表格做到了：

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中运行。我认为，问题是表格单元格中的height:100% .area，没有明确的高度。

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

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/

显示：从IE8开始理解表格，自IE10以来就是flex :(

Answer 2

如果可以，请使用div而不是表格。我会使用calc（表达式）来获得100％的高度减去页脚和页眉的总和。看看这里的小提琴。如果删除内容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行布局，总最小高度：100％

2 个答案: