我正在使用 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>
在这里查看:JSFiddle
我一直在关注类似问题的一些答案(例如 here 和 here),但没有一个有效。我可能遗漏了什么。
在我的 JSFiddle 中,您可以看到我的原始版本,因为所有建议的修复都对我不起作用。
你能帮忙吗?
最佳答案
您的页面内容需要位于单独的 div
中,该 div
不会占用与顶部和底部导航栏重叠的任何屏幕部分。在您的情况下,您需要将 position: fixed
添加到您的内容中,然后确保它不占用顶部和底部区域。
添加以下 CSS 应该可行:
#content {
position: fixed;
top: 80px;
bottom: 80px;
left: 0;
right: 0;
}
关于html - 固定顶部+底部导航栏,中间有可滚动内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21607015/