Question

我使用bootstrap的navbar-fixed-bottom在底部有一个粘性导航栏。这非常有效。我遇到的问题是，当我使用Backbone.Marionette动态添加内容时，导航栏不再粘在底部 - 而是只是停留在同一个位置，隐藏了一些内容，最终内容会低于它，因为我添加了更多内容。 / p>

无论添加多少内容，都有办法强制导航栏停留在底部吗？

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>

Bootstrap Navbar-Fixed Bottom Sticky Footer

2 个答案: