twitter-bootstrap Bootstrap 导航栏固定底部粘性页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25147437/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Navbar-Fixed Bottom Sticky Footer
提问by Tom Hammond
I'm using bootstrap's navbar-fixed-bottom to have a sticky navbar at the bottom. This works great. The problem I have is when I use Backbone.Marionette to dynamically add content the navbar no longer sticks to the bottom - rather it just stays in the same spot, hiding some content and eventually the content just goes below it as I add more.
我正在使用引导程序的导航栏固定底部在底部有一个粘性导航栏。这很好用。我遇到的问题是，当我使用 Backbone.Marionette 动态添加内容时，导航栏不再粘在底部 - 而它只是停留在同一个位置，隐藏一些内容，最终当我添加更多内容时，内容只会在它下方。
Is there a way to force the navbar to stay stuck to the bottom regardless of how much content is added?
不管添加了多少内容，有没有办法强制导航栏停留在底部？
回答by Adam Whitney
Or simply...
或者干脆...
.navbar{
position: fixed;
bottom: 0;
left: 0;
right: 0;
/* the rest of the styling */
}
A lot neater and easier I find. And doesn't matter how tall your navbar is. You can add heights and colours and whatever styling you want after it.
我发现更整洁、更容易。并且您的导航栏有多高都没有关系。您可以添加高度和颜色以及您想要的任何样式。
回答by Desmond Liang
This is an old trick without Bootstrap. Supposed you know the height of the navbar. You can try this: http://jsfiddle.net/e85xw/
这是一个没有 Bootstrap 的老技巧。假设您知道导航栏的高度。你可以试试这个：http: //jsfiddle.net/e85xw/
.navbar{
height: 2em;
width: 100%;
background: blue;
color: white;
position: fixed;
top: 100%;
margin-top: -2em;
}
If you don't know the height of the navbar, you can use JS for a little help http://jsfiddle.net/2T282/
如果你不知道导航栏的高度，你可以使用 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>
