4

这就是我想要实现的目标：

预期结果

  • 即使内容没有垂直填充视口，页脚也应该留在屏幕底部。
  • 内容列的边框应始终为 100% 内容高度。由于列的数量和宽度会因页面而异，因此无法使用背景图像到假列边框。
  • 当所有内容都可见时不应该有滚动条（示例 1）。
  • 解决方案应该是所有的 HTML/CSS，没有 JS。
  • 最低浏览器支持应为 IE9+ 和最新桌面版本的 Firefox、Chrome、Safari、Opera；没有怪癖模式。
  • 页眉/页脚/内容的宽度始终是固定的（因此页眉和页脚不需要放置在内容区域内）。页眉和页脚的高度也是固定的。

我尝试了Fluid Width Equal Height Columns和这个粘性页脚示例中的技术，但无法同时满足所有要求。任何提示表示赞赏。

编辑：到目前为止，我所做的最远的是模仿在 webkit 浏览器中正常工作但在 IE9 和 Opera 中不能正常工作的表格。看这里的小提琴。

HTML：

<div class="table outer">
    <div class="row header">
        <div class="cell">header</div>
    </div>
    <div class="row content">
        <div class="cell">
            <div class="table inner">
                <div class="row">
                    <div class="cell">content 1</div>
                    <div class="cell">content 2</div>
                    <div class="cell">content 3</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row footer">
        <div class="cell">footer</div>
    </div>
</div>

CSS：

html, body {
    height: 100%;
}
.table {
    display: table;
    min-height: 100%;
    height: 100%;
}
.table.outer {
    width: 500px;
    margin: 0 auto;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}
.header, .footer {
    height: 25px;
    background-color: #999;
}
.content {
    background-color: #eee;
}
.table.inner {
    width: 100%;
    min-height: 100%;
    height: 100%;
}
.table.inner .cell {
    width: 33%;
    border-right: 1px dashed #c00;
}
4

3 回答 3

4

虽然不是语义上理想的解决方案，但我能找到实现所有规定要求的唯一方法是回到 90 年代并使用表格进行布局。

看这里的小提琴。

HTML：

<!DOCTYPE html>
<html>    
<head>
    <meta charset="utf-8">
</head>
<body>
    <table class="outer">
        <tr>
            <td class="header" colspan="3">header</td>
        </tr>
        <tr class="content">
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
        </tr>
        <tr>
            <td class="footer" colspan="3">footer</td>
        </tr>
    </table>
</body>
</html>

CSS：

html, body {
    height: 100%; margin: 0;
}
.outer {
    min-height: 100%;
    height: 100%;

    width: 500px;
    margin: 0 auto;
}
.header, .footer {
    height: 25px; background-color: #999;
}
.content td {
    width: 33%;
    background-color: #eee;
    border-right: 1px dashed #c00;
    vertical-align: top;
}
于 2012-11-02T13:03:04.843 回答
0

试试这个 ：

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
于 2012-11-02T08:00:34.423 回答
0

如果有人感兴趣，我想出了一个使用 jQuery（而不是表）的解决方案。

http://benpearson.com.au/web-development/3-column-fluid-layout-with-header-sticky-footer-and-100-percent-height-columns/

于 2013-07-08T14:23:01.777 回答