Html 带有页眉、页脚和多个100%最小高度内容列的CSS布局_Html_Css

Html 带有页眉、页脚和多个100%最小高度内容列的CSS布局

html css

Html 带有页眉、页脚和多个100%最小高度内容列的CSS布局,html,css,Html,Css,这就是我想要实现的目标：即使内容没有垂直填充视口，页脚也应保持在屏幕底部内容列的边框应始终为100%内容高度。由于列的数量和宽度会随着页面的变化而变化，因此不能使用背景图像和假列边框当所有内容都可见时，不应有滚动条（示例1）解决方案应该是所有HTML/CSS，而不是JS 最低限度的浏览器支持应该是IE9+和Firefox、Chrome、Safari、Opera的最新桌面版本；没有怪癖模式页眉/页脚/内容的宽度总是固定的（所以页眉和页脚不需要放在内容区域内）。页眉和页脚的高度也是固

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

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

我尝试了和的技术，但未能同时满足所有要求。任何提示都将不胜感激

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

HTML:

试试这个：

#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');
}

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

HTML:

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

使用这种技术，当内容超过视口高度时，页脚会停留在屏幕底部，不会被向下推（示例2中所示的行为是所需的）站点不应依赖脚本进行布局。。。但我不敢相信没有其他办法。

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;
}

#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');
}

<!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>

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;
}