html页脚布局和内容,html – 包含页眉,页脚和多个100％最小高度内容列的CSS布局...

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

>即使内容未垂直填充视口,页脚仍应保留在屏幕底部.

>内容列的边框应始终为100％内容高度.由于列的数量和宽度将在页面之间发生变化,因此无法使用背景图像到伪列边框.

>当所有内容都可见时,应该没有滚动条(例1).

>解决方案应该是所有HTML / CSS,没有JS.

>最低浏览器支持应该是IE9和Firefox,Chrome,Safari,Opera的最新桌面版本;没有怪癖模式.

>页眉/页脚/内容的宽度始终是固定的(因此页眉和页脚不需要放在内容区域内).页眉和页脚的高度也是固定的.

编辑：到目前为止,我所获得的最远的是模仿在webkit浏览器中正常工作的表,但在IE9和Opera中没有. See the fiddle here.

HTML：

header

content 1

content 2

content 3

footer

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;

}