CSS - 使页面居中 - 然后使页面高度为100%

Question

我试图将页面居中,然后将其设置100%为高度.我有一个名为"content"的div作为HTML页面中所有元素的父元素.接下来我需要做什么？我想远离任何CSS黑客.这目前在IE7中有效,但在Firefox 3中没有.

编辑:我增加了高度:100%; 对#content,这就是使得它在IE浏览器.Firefox还没有解决.

到目前为止我的样式表是:

html, body
{
    width: 100%;
    height: 100%;
}

body
{
    background-color: #000;
    text-align: center; 
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto; 
} 

#content
{
    position: relative; 
    text-align: left;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    width: 840px;
    height: 100%;
    padding: 0px 5px 5px 5px;
}

Answer 1

为了使页面居中，我通常只是将内容 div 放在中心标签中，因为 margin-left/right:auto 确实不适用于所有版本的 IE。

为了使页面具有整个高度，您可以通过几种方法来伪造它。我最喜欢的是为 ​​body 标签创建一个水平居中但垂直平铺的背景图像，这样主 div 就会有白色背景。不过，您可能仍然有一个页脚，因此您可以将其定位为“bottom:0”，这应该将其保留在底部，并为您提供一个看起来延伸到整个页面的内容 div。