[英]Fixed top + bottom navbars with scrollable content in between
我正在使用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
我一直在关注类似问题的答案(例如这里和这里 ),但它们都没有奏效。 我可能错过了一些东西。
在我的JSFiddle中,您可以看到我的原始版本,因为所有建议的修复都不适用于我。
你能帮忙吗?
您的页面内容需要位于一个单独的div
,该div
不占用与顶部和底部导航栏重叠的屏幕的任何部分。 在您的情况下,您需要添加position: fixed
到您的内容,然后确保它不占据顶部和底部区域。
添加以下CSS应该有效:
#content {
position: fixed;
top: 80px;
bottom: 80px;
left: 0;
right: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.