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

Question

我正在尝试将页面居中并使其高度为100%。我有一个名为“content”的div，作为HTML页面中所有元素的父元素。 接下来我需要做什么？我想避免使用任何CSS-hack。 目前在IE7中可以工作，但在Firefox 3中无法正常工作。

编辑：我在#content中添加了height：100％; 这是使它在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;
}

- Bruno Tyndall

---

我在我的FF 3.0中没有发现任何问题。你能提供更多细节吗？ - andyk

Answer 1

要居中内容，将其放在具有固定宽度（很重要！）和margin: auto;的元素内。

除非使用javascript，否则没有跨浏览器的方法使您的div具有100％的高度。如果您急于需要此功能并愿意使用javascript，则可以通过将其设置为窗口高度来动态设置内容的高度。我从未做过这件事，所以不会告诉您具体如何操作，但是应该很容易通过谷歌搜索找到相关信息。

- Logan Serman

---

我已经解决了居中的问题。现在只是无法弄清楚高度的问题。我想我倾向于JavaScript解决方案（今天上班路上就考虑到了这个）。 - BuddyJoe

Answer 2

啊哈！我现在明白了。这可以在Firefox 3和IE7中使用。我稍后会在其他浏览器上进行测试。我仍然需要弄清楚如何在内容周围添加一些填充。

这需要在我的页面上使用以下层次结构

html  
|__body  
     |__div id=container  
         |__div id=content  

    html
    {
        height: 100%;
    }

    body
    {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container
    {
        position: absolute;
        text-align: center; 
        background-color: #000;
        width: 100%;
        height: 100%;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;    
    } 

    #content
    {
        text-align: left;
        background-color: #fff;
        margin: 0px auto;
        width: 830px; /* padding thing I'm working on */
        height: 100%;
    }

- Bruno Tyndall

Answer 3

这样做应该更好。
没有额外的标记和/或id。 不需要JavaScript和/或CSS表达式。
在所有浏览器上都应该正常工作。

<style>

html 
{
 background-color:red; 
 margin:0;
 padding:0;
 border:0px;       
}

body{
 background-color:yellow;
 position:absolute;
 left:-400px; /* 50% of content width */
 width:800px; /* your content width */
 margin-left:50%;
 margin-top:0;
 margin-bottom:0;
 top:0;
 bottom:0;
 border:0;
 padding:0
}
</style>

- frenchone

Answer 4

这在Firefox 3和Safari 3中对我有效。没有IE的访问权限。

html{
  position:absolute;
  top:0;
  bottom:-1px;
  left:0;
  right:0;
  height:100%;
  text-align:center;
}
body{
  text-align:left;
  margin-left:auto;
  margin-right:auto;
  margin-top:0;
  min-height:100%;
  min-width:30em;
  max-width:50em;
  width:expression("40em");/*IE doesn't support max/min width*/
  padding:0 1em 0 1em;
}

- Glyphobet

Answer 5

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

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

试试这个。这个会起作用的。移除html、body选择器，你不需要它。

- fasih.ahmed

Answer 6

为了使页面居中，我通常将内容div放在center标签中，因为margin-left/right:auto在所有版本的IE中并不起作用。

为了使页面高度充满整个屏幕，你可以通过几种方法来伪造它。我最喜欢的方法是为body标签创建一个水平居中但垂直平铺的背景图像，这样会给主div提供白色背景。你可能仍然有页脚，所以你可以使用bottom:0来定位它，这样就可以将其保持在底部，并给你一个看似扩展到整个页面的内容div。

- AJ

---

第一段减1分（避免使用居中标签），但第二段是个好主意——让#content div自由伸缩，但在body上使用重复的背景图片使其始终呈现100%。因此，总体得分+1。 - CMPalmer