Bootstrap 3 - 浮動頁腳

Question

我想在我的網站上，頁腳總是出現在屏幕上的設計，並漂浮。隨着用戶向下滾動頁腳與他們一起移動。我並沒有將自己的想法賣給自己 - 但那正是我想我想要鏈接到公司的東西的地方。如果這是一個壞主意，請讓我知道限制（在手機上可能？）。

我已經看到過在頁面底部有頁腳的設計和例子，但是如果這是「低於摺疊」，用戶需要向下滾動才能看到它。不好。

有人可以提供關於如何完成的基礎知識嗎？

在此先感謝。

Answer 1

Bootstrap有一個類可以做你想做的事：.navbar-fixed-bottom。使用該類是更好的解決方案，因爲您不需要自定義CSS。

但是，如果您確實想使用自定義CSS，請按以下步驟操作。假設您的頁腳元素具有ID「頁腳」：

#footer { 
    position: fixed; 
    width: 100%; 
    bottom: 0; 
} 

而且你必須確保當用戶滾動到頁面底部的頁腳切不可貪圖含量最低。爲了避免最簡單的解決方法是將底部邊距添加到與頁腳高度相同量的主體元素。假設您的頁腳元素是100px的身高，你可以使用此代碼：

body { 
    margin-bottom: 100px; 
} 

但是，爲了確保您避免頁腳重疊，你將不得不使用jQuery屏幕大小的變化更新身體的底部邊緣，因爲頁腳高度可以改變，特別是在響應式佈局中。