CSS 100％高度布局
我知道这是一个普遍的问题，我查找了一些解决scheme，但是找不到我正在寻找的东西。
我想将其转换为无表格布局。
注意：页眉和页脚必须设置为固定的像素高度（50px是可以的）。
我遇到的主要问题是，我无法在中间得到那个“大箱子”，performance得和表格一样。 有可行的解决scheme，可变长度的内容（文本，图像），但我希望这个盒子看起来像一个盒子 – 有边框，圆angular和所有的行为。
你可以使用表格样式的CSS属性，但仍然保留表less标记（这仍然是一个胜利）。
例
HTML
<div id="container"> <div id="header"><div>header</div></div> <div id="content"><div>content</div></div> <div id="footer"><div>footer</div></div> </div> CSS
html, body { height: 100%; padding: 0; margin: 0; } #container { display: table; width: 100%; height: 100%; border: 1px solid red; text-align: center; } #container > div { display: table-row; width: 100%; } #container > div > div { display: table-cell; width: 100%; border-radius:10px; } #header > div { height:50px; border:solid 2px #aaa; } #content > div { height: 100%; background:#f0f4f0; border:solid 2px #5a5; } #footer > div { height:50px; border:solid 2px #a55; }
jsFiddle 。
“多个绝对坐标”是实现这个目标的好方法。 这是当你绝对放置一个盒子，然后给它的顶部和底部的坐标。 没有指定高度，你会得到一个盒子，它的顶部是10px，而父盒子的底部边缘是10px。
这是一个例子
如果您关心该浏览器，则需要添加一个IE6特定样式。
这里有一篇关于该技术的文章 （加上IE6的修复） – 即使你不用它来解决这个问题，也是一个很好的知识。
你没有提到你的子元素的高度，所以我不得不做出一些推定。 你可以使用百分比，如果你想。
<style> html,body {margin:0;padding:0; } #mainContainer { height:100%; width:100%; } #header { height:15%; width:100%; background-color:red; } #center { height:75%; width:100%; background-color:blue; } #footer { height:10%; width:100%; background-color:pink; } </style> <body> <div id="mainContainer"> <div id="header">Header</div> <div id="center">Center</div> <div id="footer">Footer</div> </div> </div> </body>
