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>