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％

回答

相關問題