不是水平居中，因爲絕對位置

HTML：

<body> 
<div id="header" > 
</div> 
<div id="main" > 
</div> 
<div id="footer" > 
</div> 
</body>

CSS：

body 
{ 
    margin:0px; 
} 
#header 
{ 
    width:100%; 
    background-color:black; 
    height:60px; 
} 
#main 
{ 
    width:300px; 
    border:1px dotted black; 
    margin:0 auto; 
} 
#footer 
{ 
    width:100%; 
    background-color:black; 
    height:40px; 
    position:absolute; 
    bottom:0px; 
}

http://jsfiddle.net/VpwQQ/2/

但正如你所看到的，main DIV沒有高度。

然後我取代了我的CS說：

body 
{ 
    margin:0px; 
} 
#header 
{ 
    width:100%; 
    background-color:black; 
    height:60px; 
} 
#main 
{ 
    width:300px; 
    border:1px dotted black; 
    position:absolute; 
    margin:0 auto; 
    bottom:60px; 
    top:80px; 
} 
#footer 
{ 
    width:100%; 
    background-color:black; 
    height:40px; 
    position:absolute; 
    bottom:0px; 
}

http://jsfiddle.net/VpwQQ/1/

但隨後，水平中心不起作用。

我怎樣才能做到這一設計（div中心，並採取所有的頁面高度之間的標題和頁腳與20像素magin）？

來源

2012-08-01 Mageek

你將不得不使用Javascript中心div。絕對位置從文檔流中移除元素。 – laymanje 2012-08-01 14:53:21

@laymanje如果不想特別使用'position：absolute;'。我只想做這個設計。（這與stackoverflow和許多其他網站相同）。 – Mageek 2012-08-01 14:57:07

我不知道你想做什麼，但我給我發生了什麼事情與您的代碼發生的交代：

你#main DIV不具有的高度，因爲它不沒有CSS屬性的高度，也沒有任何內容。

你應該添加一個height: 100px或者只是添加一些內容，你會看到它得到一個高度。

我問你想要做什麼的原因是因爲你不清楚你想要什麼樣的最終產品。

你會遇到另一個頁腳問題。如果你使用絕對位置，它現在會堅持到底部。將#main div的高度設置得很高，你會發現當你不得不向下滾動頁面時，頁腳停留在原來的位置。請參閱http://jsfiddle.net/VpwQQ/3/

您應該使用position: fixed，但這會將其保留在WINDOW底部而不是DOCUMENT。因此，您將遇到必須使用Javascript才能正確測量文檔高度和設置位置的問題。不知道你想做什麼，但如果你只是想佈局一個網站，然後使用標準的相對定位，自然推下頁腳下面的＃主div。

編輯：

見http://jsfiddle.net/VpwQQ/4/如果你只是想建立一個正常的網站佈局。

如果您希望頁腳始終「粘」到頁面的底部，那麼您將需要使用position: fixed，但我不認爲這適用於所有瀏覽器。見http://jsfiddle.net/VpwQQ/6/

最後，讓這兩種頁腳和頭「粘」看到http://jsfiddle.net/VpwQQ/8/

來源

2012-08-01 14:57:50

我只想擁有這個設計，就像使用stackoverflow的設計或Facebook的設計。一個頁眉和一個頁腳，以及一個可擴展的主div。（並沒有JS）。 – Mageek 2012-08-01 15:02:20

看我的編輯，第一句:) – 2012-08-01 15:07:51

謝謝！ http://jsfiddle.net/VpwQQ/4/是我想要的！ – Mageek 2012-08-01 15:11:04

我添加一個div裏面#main。

主現在有100％的寬度。

裏面，把一個300px的div，沒有絕對的位置。

我叉你的提琴：http://jsfiddle.net/8U9P6/

Personnally我喜歡的JavaScript的解決方案，而不是使用的絕對位置。但是這個解決方案似乎工作。

添加和溢出包含在裏面DIV的內容：http://jsfiddle.net/M2nZc/

注意，頁面不會增長，因爲它是絕對位置。

來源

2012-08-01 15:02:43 unludo

確切！謝謝！ – Mageek 2012-08-01 15:08:23

@Mageek u r w：:) – unludo 2012-08-01 15:08:56

不透露，是否有任何理由做所有這些工作，而不僅僅是爲#main添加高度？ – 2012-08-01 15:09:37

您不能在絕對定位的元素上使用自動邊距，因爲它不再處於文檔流中。

在#main div上使用width: 100%，然後在其中使用自動邊距居中的另一個元素。

演示：http://jsfiddle.net/Guffa/VpwQQ/9/

注意：您可能需要使用的body和html元素height: 100%爲bottom大小的#main元素上工作。

來源

2012-08-01 15:05:49 Guffa

一旦您將#main div填入內容，它會根據內容自動獲得高度。您可以簡單地填入lorem ispum的幾個段落來模擬內容。您現在可以刪除絕對位置並定位CSS。

使用「0 auto」簡寫居中div只適用於父元素（對於#main div是正文元素）具有定義的寬度。要做到這一點，嘗試給你的身體元素100％的寬度。這樣做是你可能想要在你的CSS中養成習慣的事情。

要使#main div總是在#header div下面20px，只需將20px的margin-bottom添加到您的#header div即可。在#main div下面執行同樣的步驟來分隔頁腳。

概括起來（沒有底部的頁腳，現在）你的CSS可能會讀這樣的事情：

body { 
    width: 100% 
    margin: 0px; 
} 

#header { 
    width: 100%; 
    height: 60px; 
    margin-bottom: 20px; /*here we space the header 20px from the next element*/ 
    background-color: black; 

} 

#main { 
    width: 300px; 
    margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/ 
    border:1px dotted black; 
} 

#footer { 
    width:100%; 
    height:40px; 
    background-color:black; 
}

例子：http://jsfiddle.net/WEx3j/

如果你想頁腳是「粘性」（總是在你的網站的最底部），我建議你採用this方法。

我希望這個澄清了幾件事情。

來源

2012-08-01 15:11:31 bakkerjoeri

不是水平居中，因爲絕對位置

回答

相關問題