用CSS樣式無法擺脫​​HTML頁面底部的空間

Question

我最近發佈了一個關於使用CSS居中頁面的問題。我想出瞭如何做到這一點，它看起來不錯，但現在，我的頁面底部有一堆不必要的空間。我無法弄清楚如何擺脫它。

我把它上傳到一個快速免費的虛擬主機，所以你們可以看看。 這就是我努力工作以：http://eric.200u.com/index.html

這是我關於頁面的中心CSS：

html, body 
{ 
    padding: 0; 
    margin: 0; 
} 

#container 
{ 
    width: 700px; 
    margin: 0 auto; 
    text-align: left; 
} 

Answer 1

那是因爲你使用的是相對定位放置在彼此的頂部元素。當你這樣做時，元素會顯示在原來的位置以外的地方，但他們仍然會在文檔流中佔用空間。

改爲使用絕對定位，以便將元素從文檔流中取出。

Answer 2

的問題是因爲背景的div

<div id="bg"></div> 

因爲頂部被設置爲-190px，大小190的空間的底部是由。要修復它，請爲該div設置margin-bottom：-190px。

Answer 3

一種更簡單的解決方案是樣式最外元件如下

body 
{ 
    padding: 0; 
    margin: 0 auto; 
    width: 700px; /* px is bad here, but I'm keeping things simple for now */ 
} 

#container 
{ 
    position: absolute; 
    background: url(images/pixel_down.jpg); 
    height: 100%; 
} 

，並從所有其它元件除去CSS定位。那麼爲什麼你將導航欄代碼拼湊得太多以至於無法訪問，而不是使用簡單的圖像行？

您也可以嘗試找到一個免費的主機，其廣告不會搞亂佈局。我相信http://www.webs.com/就是這樣，儘管我不確定自從上次看以來它是否發生了變化。