如何在Bootstrap中創建非粘性頁腳？

Question

如何製作橫跨屏幕整個寬度（儘管屏幕分辨率）並停留在頁面底部的頁腳？

當我搜索這個時，我得到人們提供代碼粘頁腳（與頁面hoover頁腳），並說使用絕對定位（我聽到的是一個不是）。

一個完美的例子就是twitter bootstrap引用的一個網站（https://www.gathercontent.com/）。在該網站上，頁腳（看起來像英雄單位或其他東西）始終位於頁面的底部。

Answer 1

使用這個jQuery：

$(window).load(function() { 
    $('.footer').width($(window).width()); 
    $(window).resize(function() { 
     $('.footer').width($(window).width()); 
    }); 
}); 

確保你有雖然

Answer 2

我一直在尋找類似的，因爲我不想頁腳徘徊東西js文件。頁腳阻止了小型移動設備上的下拉菜單元素。我所做的只是從頁腳類中刪除「navbar-fixed-bottom」。

我改變

<div class = "footer navbar-fixed-bottom"></div> 

到

<div class = "footer"></div> 

Answer 3

如果使用的是引導，這個例子說明如何做到這一點。該名稱在網站上具有誤導性，但如果內容不多，它將停留在網頁的底部。如果有很多內容，它也會向下移動頁面（所以不會粘住）。

頁腳：

http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/

的CSS：

http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/sticky-footer-navbar.css

確保不要忘記

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