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

我试图居中页面，然后使页面高度达到100％。我有一个名为“内容”的div作为HTML页面中所有元素的父元素。接下来我需要做什么？我想远离任何CSS黑客攻击。这是目前在IE7，但不是在Firefox 3.CSS - 使页面居中 - 然后使页面高度达到100％

编辑：我增加了身高：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; 
}

来源

2008-12-17 BuddyJoe

我在FF 3.0中看不到任何错误。你能提供更多细节吗？ – andyk 2008-12-17 04:38:57

-1

为中心的页面，我通常只是把内容DIV在中心标记，因为保证金左/右：汽车确实没有在所有版本的IE。

为了使页面达到整个高度，您可以通过几种方法将其伪造。我最喜欢的是为身体标记创建一个背景图像，该图像是水平居中但垂直平铺的，这样可以使主div的白色背景。你可能还有一个页脚，所以你可以用bottom：0来定位它，并且它应该保持在最下面，并给你一个内容div，它看起来会延伸到整个页面。

来源

2008-12-17 04:22:42

第一段减1（避免使用中心标签），但第二段是个好主意 - 让#content div伸展或缩小所需的所有内容，但在主体上使用重复背景图像使其看起来100％每时每刻。所以，我会说整体+1。 – CMPalmer 2008-12-17 15:38:15

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，身体选择器，你不需要。

来源

2008-12-17 04:58:05

为中心的内容，就把它具有固定宽度（重要！），并具有margin: auto;

没有跨浏览器是为了使您的div有100％的高度，除非你使用JavaScript元素的内部。如果您对此功能感到绝望并且愿意使用JavaScript，则可以通过将其设置为窗口高度来动态设置内容的高度。我从来没有这样做过，所以我不会告诉你究竟是如何，但它应该很容易找到谷歌搜索。

来源

2008-12-17 13:43:30

我找到了中心化的东西。现在无法弄清楚身高的问题。我认为我倾向于JavaScript解决方案（想想今天工作的驱动器）。 – BuddyJoe 2008-12-17 21:47:56

啊哈！想想我现在明白了。这适用于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%; 
    }

来源

2008-12-17 22:34:41 BuddyJoe

上这对我的作品在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; 
}

来源

2009-04-01 00:54:11

这应该做得更好。
没有额外的标记和/或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>

来源

2011-03-09 16:05:42 frenchone

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

回答

相关问题