twitter-bootstrap 固定顶部 + 底部导航栏与可滚动的内容之间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21607015/
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
Fixed top + bottom navbars with scrollable content in between
提问by Haji
I'm using Bootstrap and need to have 2 fixed nav bars, top and bottom. The content between them gets long and needs to have a scrollbar. The thing is that the scrollbar appears on the entire screen while I want it to be on the content only:
我正在使用 Bootstrap 并且需要有 2 个固定的导航栏，顶部和底部。它们之间的内容变得很长，需要有一个滚动条。问题是滚动条出现在整个屏幕上，而我希望它只出现在内容上：
<div>
<div class="navbar navbar-blend navbar-fixed-top">
<div class="row">
<div class="col-xs-9 col-md-9"><span>Text top</span></div>
</div>
</div>
<div id="content">
<div class="container">
<div>
<div class="row">
<div class="col-xs-12 col-md-12"><p>Row1</p></div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12"><p>Row2</p></div>
</div>
</div>
</div>
</div>
<div class="navbar navbar-blend navbar-fixed-bottom">
<div class="nav"><span>Text buttom</span></div>
</div>
</div>
See it here: JSFiddle
在这里看到它：JSFiddle
I've been following some answers to similar questions (hereand here, for instance), but none of them has worked. I'm probably missing something.
我一直在关注类似问题的一些答案（例如，这里和这里），但没有一个有效。我可能错过了一些东西。
In my JSFiddle you see my original version, since none of the suggested fixes worked for me.
在我的 JSFiddle 中，您会看到我的原始版本，因为没有任何建议的修复对我有用。
Can you assist?
你能帮忙吗？
回答by Zhihao
The content of your page needs to be in a separate divthat does not take up any portion of the screen that overlaps with your top and bottom nav bars. In your case, you need to add position: fixedto your content, then make sure it doesn't occupy the top and bottom areas.
您的页面内容需要单独放置div，不占用与顶部和底部导航栏重叠的任何屏幕部分。在您的情况下，您需要添加position: fixed到您的内容中，然后确保它不占据顶部和底部区域。
Adding the following CSS should work:
添加以下 CSS 应该可以工作：
#content {
position: fixed;
top: 80px;
bottom: 80px;
left: 0;
right: 0;
}
