我正在寻找一种方法来实现填满整个窗口的单列垂直布局。此布局包含三个组件:
- 标题(不变，但大小未知)
- body (可变大小，拉伸(stretch)以填充)
- 页脚(不变，但大小未知)
我之前已经完成了页眉/页脚固定和已知大小的布局，但我希望它们现在具有动态大小(基于内容)。灵活的盒子模型似乎是为了让这变得简单，但我不知道如何让它工作(这可能是由于浏览器支持)。
此时我需要一个仅适用于 FireFox 的解决方案，绝对最新的版本就可以了(比如 18 或 19)。
最佳答案
<!doctype html>
<html lang="en">
<head>
<title>Header/Footer Vertical Centering Test</title>
<style type="text/css">
/* Set document height*/
html, body { height:100%; }
/* Set container height and context */
#container { position:relative; min-height:100%; }
/* Declare positioned children of container */
#masthead, #footer { position:absolute; }
/* Position masthead */
#masthead { top:10px; }
/* Position and layer footer */
#footer { bottom:0; z-index: 2; }
/* Set fluid height for footer */
#footer { height:5%; }
/* Set padding for content header placeholder */
#header { padding-bottom: 10%; }
/* Set fluid height and display for middle container */
#middle { height:60%; display:table; padding-bottom: 5%; }
/* Set display and vertically centered content */
#vertcenter { display:table-cell; vertical-align: middle; }
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="middle">
<div id="vertcenter">
Content
</div>
</div>
<div id="masthead">
header
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
关于css - 用拉伸(stretch)的中间组件填充窗口的垂直布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12946816/