CSS 100%高度布局

Question

我知道这是一个常见问题,我查找了一些解决方案,但找不到我想要的内容.

我想转换此为表布局.

注意:页眉和页脚必须设置为固定高度(以像素为单位)(50px即可).

我遇到的主要问题是我无法在中间获得那个"大盒子",就像它完成表格一样.有一些解决方案适用于可变长度的内容(文本,图像),但我希望这个盒子看起来像一个盒子 - 边框,圆角和所有.

Answer 1

您可以使用表格样式的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;
}

jsFiddle.

Answer 2

"多个绝对坐标"是实现这一目标的好方法.这是当你绝对定位一个盒子,然后给它顶部和底部坐标.如果没有指定高度,你会得到一个想要从顶部开始10px的盒子,以及从它的父级底边开始10px的盒子.

这是一个例子

如果您关心该浏览器,则需要添加IE6特定样式.

这是一篇关于该技术的文章(加上IE6修复) - 即使你没有将它用于这个问题,这也是一个很好的知识.