2013-02-04 72 views
0

我有一個固定位置的頁腳,我試圖保留在頁面的底部,但也讓它在調整大小時不遵循瀏覽器窗口。因此,如果我從底部拖動Firefox,它就會隱藏起來。調整窗口大小時隱藏的頁腳?

我試過相對位置,這使得頁腳跳起來,並坐在標題下。我也試過絕對的位置,我認爲這是一個正確的位置,但它似乎與固定的位置一樣。

CSS:

html, body { 
    height: 100%; 
    width: 100%; 
    overflow-x: hidden; 
    margin: 0; 
    padding: 0; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 12px; 
    -webkit-font-smoothing: antialiased; 
    font-smoothing: antialiased; 
}    
#wrapper { 
    min-height: 100%; 
    position: relative; 
} 
#header { 
    width: 100%; 
    padding: 10px; 
    background-color: #fff; 
    position: relative; 
    -webkit-box-shadow: 0px 0px 30px #7a7a7a; 
    -moz-box-shadow: 0px 0px 30px #7a7a7a; 
    box-shadow: 0px 0px 30px #7a7a7a; 
} 
#content { 
    padding: 10px; 
    padding-bottom :45px; 
} 
#footer { 
    width: 100%; 
    height: 45px; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background: #222; 
    margin: 0; 
    padding: 0; 
} 

任何想法?

+0

在jsfiddle中發佈一個工作示例。 – Axel

回答

0

我相信我已經解決了您的問題。您需要像以前一樣使用position: absolute;,但是不必像從前那樣指定位置/位置,您必須像這樣從頂部指定它:top: 500px;這樣,您可以將內容插入到頁腳上方,並且它仍然保留在它的位置您調整瀏覽器窗口的大小!

編輯:經過一番研究我發現,另一種方式是把在包含塊(其是固定被定位一個元素或者相對絕對,或)一個的內容和然後將其放在文檔源的底部,然後從那裏開始。

+0

是的,這不會真的不幸。我需要它在任何顯示的位置坐在相同的位置 – user2037183

+0

您可能必須使用一些JavaScript來確定用戶瀏覽器窗口高度並相應地調整您的CSS。這裏有一個鏈接:http://www.w3schools.com/js/js_window.asp – Chakotay

相關問題