修复了顶部和底部导航栏,其中包含可滚动内容

时间:2014-02-06 15:27:17

标签: html css twitter-bootstrap

我正在使用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

我一直在关注类似问题的答案(例如herehere),但没有一个有效。我可能错过了一些东西。

在我的JSFiddle中,您会看到我的原始版本,因为所有建议的修复都不适用于我。

你能帮忙吗?

1 个答案:

答案 0 :(得分:9)

您的网页内容需要位于单独的div中,不会占据与您的顶部和底部导航栏重叠的屏幕的任何部分。在您的情况下,您需要在内容中添加position: fixed,然后确保它不占据顶部和底部区域。

添加以下CSS应该有效:

#content {
    position: fixed;
    top: 80px;
    bottom: 80px;
    left: 0;
    right: 0;
}

<强> jsFiddle