我正在尝试实现具有页眉、中间和页脚区域的典型布局。我特别想确保页脚永远不会高于可见屏幕的底部。换句话说:当 Middle 内容较短时,Footer 应该正好在页面底部;当 Middle 内容较高时,Footer 可以在折叠下方,并且必须在 Middle 内容的底部下方。
一个额外的限制是我正在处理大量现有的 HTML,我无法批量更改——我大多只能更改所涉及的 CSS。中间区域有时是表格标签,有时是 div。这就是问题所在——div 和 table 在这里表现不同(在最新的 Chrome、Safari 和 FF 中)。
我可以使用哪些 CSS 可以同时用于 table 和 div(并且可以在合理的桌面浏览器中使用,让我们说过去 3 年的任何内容)?
对于基于 <table> 的页面,css 设置如下:
- 将 html 和正文调整为宽度和高度 100%,无边距
- 页脚高度硬设置为 20 像素,没有边距
- 标题高度硬设置为 100 像素,没有边距
- 中间高度为 100%
- Middle 的上边距为 -20px,下边距为 -100px
这对 <table> 有预期的效果:
- html、body 和 Middle 的 100% 高度使 Middle 至少与窗口一样高。
- Middle 上的边距具有将中间区域拉到页眉下方页面顶部的效果,并将页脚向上拉,使其位于中间区域的底部。
但是,对于 < div > 它失败了。“拉”的效果是一样的,而且效果很好。但是div 的高度似乎是 Header 的高度加上窗口的高度。
我尝试过调整不同部件的盒子模型;我试过“显示:表;” 在 div 上。
这是一些演示该问题的 HTML。只需删除“显示:无;” 用于 div.middle 或 table.middle 查看每个的行为。
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.header {
width: 90%;
height: 100px;
background: rgba(0,255,0,.25);
}
table.middle {
display: none;
box-model: border-box;
height: 100%;
margin-bottom: -20px;
margin-top: -100px;
padding-top: 100px;
width: 100%;
background: rgba(255,0,0,.25);
}
div.middle {
display: none;
box-model: border-box;
height: 100%;
margin-bottom: -20px;
margin-top: -100px;
padding-top: 100px;
width: 100%;
background: rgba(255,0,0,.25);
}
.footer {
width: 90%;
height: 20px;
background: rgba(0,0,255,.25);
}
</style>
</head>
<body>
<div class="header">
header
</div>
<table class="middle"><tr><td>
body
</td></tr></table>
<div class="middle">
body
</div>
<div class="footer">
footer
</div>
</body>
</html>