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

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

除非你使用javascript，否则没有跨浏览器让你的div有100％的高度。如果您非常渴望使用此功能并且愿意使用javascript，则可以通过将内容设置为窗口高度来动态设置内容的高度。我从来没有这样做过，所以我不会告诉你究竟是怎么回事，但谷歌搜索应该很容易找到。

Answer 2

AHAH！我想我现在就知道了。这适用于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%;
    }

Answer 3

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，正文选择器，你不需要它。

Answer 4

这适用于Firefox 3＆amp; 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;
}

Answer 5

这应该做得更好。
没有额外的标记和/或ID。在CSS中不需要javascript和/或表达应该适用于所有浏览器。

<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>

Answer 6

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

为了使页面成为整个高度，您可以通过几种方式伪造它。我最喜欢的是为水平居中但垂直平铺的身体标签创建背景图像，这样主要的div就会产生白色背景。你可能仍然有一个页脚，所以你可以用底部定位它：0并且它应该保持在底部并给你一个内容div，它似乎扩展到整个页面。

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

6 个答案: