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

Question

我正在尝试将页面居中，然后使其高度为 100%。我有一个名为“content”的 div 作为 HTML 页面中所有元素的父元素。接下来我需要做什么？我想远离任何 CSS-hacks。这目前在 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

要使内容居中，请将其放在具有固定宽度(重要!)且具有 margin: auto;

的元素内

没有跨浏览器可以使您的 div 具有 100% 的高度，除非您使用 javascript。如果您迫切需要此功能并且愿意使用 javascript，则可以通过将内容设置为窗口高度来动态设置内容的高度。我从来没有这样做过，所以我不会告诉你具体怎么做，但通过谷歌搜索应该很容易找到。