这就是我想要实现的目标:
>即使内容未垂直填充视口,页脚仍应保留在屏幕底部.
>内容列的边框应始终为100%内容高度.由于列的数量和宽度将在页面之间发生变化,因此无法使用背景图像到伪列边框.
>当所有内容都可见时,应该没有滚动条(例1).
>解决方案应该是所有HTML / CSS,没有JS.
>最低浏览器支持应该是IE9和Firefox,Chrome,Safari,Opera的最新桌面版本;没有怪癖模式.
>页眉/页脚/内容的宽度始终是固定的(因此页眉和页脚不需要放在内容区域内).页眉和页脚的高度也是固定的.
编辑:到目前为止,我所获得的最远的是模仿在webkit浏览器中正常工作的表,但在IE9和Opera中没有. See the fiddle here.
HTML:
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;
}