我知道这是一个常见问题，我查找了一些解决方案，但找不到我想要的确切内容。
我想将this 转换为无表格布局。
注意：页眉和页脚必须设置为以像素为单位的固定高度（50 像素即可）。
我遇到的主要问题是，我无法让中间的那个“大盒子”表现得像处理桌子时那样。有一些解决方案适用于可变长度内容（文本、图像），但我希望这个盒子看起来和表现得像一个盒子——有边框、圆角等等。
【问题讨论】：
你没有说你的子元素的高度，所以我不得不做出一些假设。如果需要，您可以使用百分比。
<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>
【讨论】：
您可以使用表格样式 CSS 属性来做到这一点，但仍保留无表格标记（这仍然是一个胜利）。
<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>
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;
}
【讨论】：
“多个绝对坐标”是实现此目的的好方法。这是你绝对定位一个盒子，然后给它顶部和底部坐标的时候。在不指定高度的情况下，您会得到一个距离其父项的顶部边缘 10px 和底部边缘 10px 的框。
如果您关心该浏览器，则需要添加 IE6 特定样式。
Here's an article 谈技术（加上 IE6 修复）- 知道它是一件好事，即使您不使用它来解决这个问题。
【讨论】：