Bootstrap Navbar固定底部粘性頁腳

Question

我正在使用引導程序的navbar-fixed-bottom在底部具有粘性導航欄。 這很好。 我遇到的問題是，當我使用Backbone.Marionette動態添加內容時，導航欄不再停留在底部-而是停留在同一位置，隱藏了一些內容，最終隨着我添加更多內容，內容在其下方。

有沒有一種方法可以使導航欄始終停留在底部，而不管添加了多少內容？

Answer 1

或者只是...

.navbar{

  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  /* the rest of the styling */

}

我發現它更加整潔和容易。 導航欄有多高也沒關系。 您可以添加高度和顏色，以及之后想要的任何樣式。

Answer 2

這是沒有Bootstrap的古老技巧。 假設您知道導航欄的高度。 您可以嘗試以下方法： http : //jsfiddle.net/e85xw/

.navbar{
    height: 2em;
    width: 100%;
    background: blue;
    color: white;
    position: fixed;
    top: 100%;
    margin-top: -2em;
}

如果您不知道導航欄的高度，可以使用JS以獲得一些幫助http://jsfiddle.net/2T282/

<style>
.navbar{
    height: 2em;//in case this number is dynamic
    width: 100%;
    background: blue;
    color: white;
    position: fixed;
    top: 100%;
}
</style>

<script>
$(document).ready(function(){
    $('.navbar').css('margin-top',$('.navbar').height() * -1);
});
</script>