CSS 100% 高度布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6158975/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS 100% height layout
提问by ile
I know this is a sort of a common problem, and I looked up some solutions, but couldn't find exactly what I was looking for.
我知道这是一个常见问题，我查找了一些解决方案，但找不到我想要的。
I would like to convert thisto a tableless layout.
我想转换此为表布局。
Note: header and footer have to be set to a fixed height in pixels (50px is ok).
注意：页眉和页脚必须设置为以像素为单位的固定高度（50px 即可）。
The main problem I'm having is that I cannot get that "big box" in the middle to behave like it does when it's done with tables. There are solutions which work OK for a variable length content (text, images), but I would like this box look and behave like a box - with borders, rounded corners and all.
我遇到的主要问题是，我无法让中间的“大盒子”表现得像处理表格时那样。有一些解决方案适用于可变长度的内容（文本、图像），但我希望这个盒子的外观和行为像一个盒子——有边框、圆角等等。
回答by alex
You can do it with table style CSS properties, but still retain table less markup (which is still a win).
您可以使用表格样式的 CSS 属性来实现，但仍然保留表格较少的标记（这仍然是一个胜利）。
Example
例子
HTML
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
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;
}
回答by Ben Hull
'Multiple absolute co-ordinates' is a nice way to achieve this. This is when you absolutely position a box, then give it both top and bottom co-ordinates. Without specifying a height, you get a box which wants to be 10px from the top, and 10px from the bottom edges of its parent.
“多个绝对坐标”是实现这一目标的好方法。这是当你绝对定位一个盒子，然后给它顶部和底部坐标。不指定高度，你会得到一个盒子，它希望距离顶部 10 像素，距离其父级底部边缘 10 像素。
There is an IE6 specific style you'll need to add, if you care about that browser.
如果您关心该浏览器，则需要添加特定于 IE6 的样式。
Here's an articleon the technique (plus the IE6 fix) - it's a good one to know, even if you don't use it for this problem.
回答by Layke
You haven't said anything about heights of your sub elements, so I have had to make some presumptions. You could use percentages if you wanted.
你没有说你的子元素的高度，所以我不得不做一些假设。如果需要，您可以使用百分比。
<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>
