具有页眉，页脚和多个100％最小高度内容列的CSS布局 [英] CSS layout with header, footer and multiple 100% min-height content columns
本文介绍了具有页眉，页脚和多个100％最小高度内容列的CSS布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我想要达到的：
- 页脚应停留在屏幕底部，即使内容未垂直填充视口
- 内容列具有应始终为100％内容高度的边框。
- 当所有内容都可见时，应该没有滚动条（示例）
- 最低浏览器支持应该是IE9 +和最新的桌面版本的Firefox，Chrome ，Safari，Opera
- 页眉/页脚/内容的宽度始终是固定的（因此页眉和页脚不需要放在内容区域中）。页眉和页脚的高度也是固定的。
- Footer should stay at the bottom of the screen even if the content doesn't fill the viewport vertically.
- Content columns have a border that should always be 100% content height. As the number and width of columns will change from page to page, background-image to fake column borders can’t be used.
- There should be no scrollbars when all content is visible (Example 1).
- Solution should be all HTML/CSS, no JS.
- Minimum browser support should be IE9+ and latest desktop versions of Firefox, Chrome, Safari, Opera; with no quirks mode.
- Width of the header/footer/content is always fixed (so header and footer don’t need to be placed inside content area). Height of header and footer is also fixed.
我尝试了流体宽度等高列和此粘性页脚示例，但是无法同时满足所有要求。任何提示是赞赏。
I’ve tried techniques from Fluid Width Equal Height Columns and this sticky footer example but haven’t been able to satisfy all the requirements at the same time. Any tips are appreciated.
编辑：到目前为止，我得到的是通过模仿表在Webkit浏览器，但不是在IE9和Opera正常工作。 请参阅此处。
So far the farthest I’ve got is by imitating tables which works correctly in webkit browsers but not in IE9 and Opera. See the fiddle here.
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;
}
推荐答案
，我可以找到实现所有规定的要求的唯一方法是回到90年代，并使用表格布局。
While not a semantically desirable solution, the only way I could find to achieve all stated requirements is to go back to the 90s and use tables for layout.
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;
}
这篇关于具有页眉，页脚和多个100％最小高度内容列的CSS布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
