2011-06-09 138 views
0

我有一個頁腳http://puppetweb.ca/play/,你會發現左邊的分類列表比實際的瀏覽器窗口長。我想將頁腳粘貼到頁面底部而不是窗口,但我似乎無法弄清楚它的意思嗎?任何幫助?頁腳不會到頁面底部?

謝謝!

+0

您是否希望頁腳始終在視口底部可見,而不管滾動位置? – Mathletics 2011-06-09 18:54:41

+0

你能發佈與這個問題相關的原始CSS和HTML嗎?如果您的鏈接中沒有問題代碼,則此問題對其他人無用。 – KatieK 2011-06-09 21:39:09

+1

關於堆棧溢出的問題不僅僅是爲您提供解決方案,還爲未來的用戶提供類似問題的解決方案。根據url的'/ play'部分判斷,該網址看起來很不穩定,僅對手頭的問題有用。當該鏈接消失時,該網站的其他用戶將刪除該問題的有用性和答案。今後,請提供不適用的示例代碼,而不僅僅是您正在使用的網站的鏈接。謝謝。 – Kev 2011-06-10 00:07:56

回答

3

給頁腳position:static; CSS屬性和clear:both; CSS屬性:

#footer { 
    position:static; 
    clear:both; 
} 

由於默認的定位是靜態的,你也只是刪除所有的位置相關的屬性:

/* play, line 432 */ 
#footer { 
    background: none repeat scroll 0 0 #272433; 
/* bottom: 0; /* REMOVED */ 
    color: #FFFFFF; 
    height: 40px; 
    margin: 0 auto; 
/* position: absolute; /* REMOVED */ 
    text-align: center; 
    width: 92%; 
    clear:both; /* ADDED... could probably also be `clear:left` */ 
} 

出現問題是因爲文檔中的大多數元素都是左移的。但是浮動元素outside the normal flow

Image showing a floating image that overlaps the borders of two paragraphs: the borders are interrupted by the image. From the w3c Visual Formatting model.

欲瞭解更多信息,請參閱w3c's Visual Formatting Model

+0

很棒,很明顯:兩者都是;我失蹤了。 – Steven 2011-06-09 18:53:22

+0

如果有幫助,請不要忘記接受答案(點擊[綠色勾號](http://www.mitalia.net/images/so/accepted_tick.png)):D – 2011-06-09 18:57:21

0

在視察#footer的元素的CSS屬性我看到

margin: 0 auto; 
margin-top: 0px; 
margin-right: auto; 
margin-bottom: 0px; 
margin-left: auto; 

嘗試刪除的margin-top屬性。 CSS試圖做的是將頂部和底部的值賦值爲0,將元素拉到頁面的中間。

+0

不好運氣,我改變了保證金:0汽車;餘裕:自動; margin-right:auto;並沒有改變。我也刪除了我的CSS重置,看看是否是這個問題,並沒有運氣。 Hrm ...... – Steven 2011-06-09 18:49:46

0

減小'grid_10'的寬度並將它們設置爲向左浮動。從頁腳中刪除固定的位置並設置'clear:both',這樣它就不會浮動在兩個grid_10上