頁腳不停留在頁面的底部

我有一個網頁，我使用「超級」jquery插件來改變背景。我也有一個頁腳只如果我把它下面的CSS顯示：頁腳不停留在頁面的底部

#footer{ 
    width: 100%; 
    color: #ffffff; 
    background: #000000; 
    position: fixed; 
    bottom: 0px; 
    height: 40px; 
    padding: 5px 0px 5px 0px; 
}

然而，當事情發生時，其改變窗口的高度，頁面的內容去頁腳後面，當我向下滾動，頁腳不會停留在頁面底部 - 它會向上滾動。

例如，我有三個並排顯示的div，但是當窗口在900px寬度下調整大小時，div顯示爲一個在另一個之下，因此窗口高度會發生變化。這是當divs落後頁腳時，它隨着它們一起捲起來的。

我試過position: relative和position: static，但它甚至沒有顯示，即使z值高的值也是如此。我認爲這個「不顯示」是因爲我用於背景圖像的插件。當窗口改變高度時，我也嘗試了一些jquery函數，但沒有結果。任何想法？預先感謝您...

來源

2014-02-09 Marko Cakic

'fixed'保持在固定位置的部分相對於所述窗口（不是頁面）。那是你要的嗎？如果您始終想在頁面末尾添加頁腳，則應搜索「粘滯」頁腳。在這種情況下，你不能單獨使用CSS，因爲它取決於你沒有在這裏顯示的HTML結構。 – helderdarocha

如果你的目標是讓你的頁腳在你的「網頁內容」的底部，可見的，那麼我勸你分配height:100%您html標籤，並在你的CSS你body標籤。另一方面，如果你想讓頁腳留在「瀏覽器窗口/視口」的底部，那麼你會希望查看我希望我已經幫助過的"Making a footer stay put with CSS" by "JONATHAN LONGNECKER".！ 雅典娜
@ athenacreations.org

來源

2014-02-09 22:25:49

這裏是例如：

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 

 
main { 
 
    padding-bottom: 30px; 
 
} 
 

 
footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
}

<body> 
 
    <header> 
 
    header 
 
    </header> 
 
    <main> 
 
    main 
 
    </main> 
 
    <footer> 
 
    footer 
 
    </footer> 
 
</body>

來源

2017-01-02 16:31:31 Vadizar

頁腳不停留在頁面的底部

回答

相關問題