Question

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

我想将this转换为无表格布局。

enter image description here

注意：页眉和页脚必须设置为固定高度（以像素为单位）（50px即可）。

我遇到的主要问题是我无法在中间获得那个“大盒子”，就像它完成表格一样。对于可变长度的内容（文本，图像），有一些解决方案可以正常工作，但我希望这个框看起来像一个盒子 - 有边框，圆角等等。

Answer 1

您可以使用表格样式的CSS属性，但仍然保留表格少的标记（这仍然是一个胜利）。

实施例

Example

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的盒子。

Here's an example

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

关于该技术的

Here's an article（加上IE6修复） - 即使你没有用它来解决这个问题，这也是一个很好的知识。

Answer 3

你没有说过你的子元素的高度，所以我不得不做出一些假设。如果你愿意，你可以使用百分比。

<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 100％高度布局

3 个答案:

实施例

HTML

CSS