2010-06-04 52 views
20

我有一個固定寬度的DIV,我想保留在瀏覽器的視口底部。如何將DIV錨定到頁面底部?

不幸的是,我不知道我甚至會開始嘗試實現這一點。

顯然首先要做的是設置positionfixed。但除此之外......沒有線索。

+3

一個很好的方法來檢查這些樣的東西是上安裝Firebug的( Firefox)並檢查正在使用您嘗試實現的效果的頁面。 – Frankie 2010-06-04 04:00:24

回答

17
#mydiv{ 
    position: fixed; 
    bottom: 0px; 
} 
+0

你應該看看我發佈的鏈接。有IE和Opera需要修復。 – 2010-06-04 03:56:16

25

看到CSS-招數:

Fixed Footer

CSS:

#footer { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    height:30px; 
    width:100%; 
    background:#999; 
} 

/* IE 6 */ 
* html #footer { 
    position:absolute; 
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); 
} 
+0

對於喜歡a)現代瀏覽器和2)不包括不必要的庫依賴項的人來說,這是一個很好的解決方案(cssstickyfooter.com) – g33kz0r 2013-01-19 05:27:15

+0

帶表達式的頁腳在加載時固定在底部,但隨頁面一起滾動 – 2017-03-27 00:43:01