我知道这是一个常见的问题，我查找了一些解决方案，但不能找到我正在寻找什么。
我想把this转换为无桌布局。
注意：页眉和页脚必须设置为固定的高度(以像素为单位)(50px是确定的)。
我所遇到的主要问题是，我不能让中间的“大盒子”表现得像它做表的时候一样。有一些解决方案，可变长度的内容(文本，图像)，但我希望这个框看起来和行为像一个框 – 边框，圆角和所有。
解决方法
你可以使用表格样式CSS属性，但仍然保留表少标记(这仍然是一个胜利)。
例
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;
}
