仅使用 Bootstrap 滚动内容区域

Question

我正在开发一个小项目，其 front-end 是使用最新版本的 Bootstrap 构建的。我有自己的主页部分，但我一直坚持让它们按照我想要的方式运行。

<body>
    <div class="container-fluid max-height">
        <div class="row max-height">
            <div class="col-md-2 col-sm-12 col-xs-12 site-nav">
                <div class="row">
                    <div class="brand">
                        <a href="index.html">
                            <img src="http://placehold.it/200x320" class="img-responsive" alt="logo" />
                        </a>
                    </div><!-- .brand -->
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p>
                </div><!-- .row -->
            </div><!-- .col-md-2 -->
            <div class="col-md-10 col-sm-12 site-content">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12 info-bar">
                        <h2>SOME TITLE</h2>
                    </div><!-- .col-md-12 -->

                    <div class="col-md-6">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p>

                        <p>Quisque ligula ex, pellentesque sit amet ligula non, ullamcorper egestas nulla. Sed in sapien ut velit finibus scelerisque ac quis purus. Etiam libero nibh, euismod id augue quis, condimentum aliquam diam. Integer faucibus vitae velit sed iaculis. Praesent laoreet neque est, at pharetra nunc scelerisque sit amet. Curabitur fringilla ex a quam commodo, quis hendrerit ipsum ullamcorper. Vestibulum pretium leo odio, feugiat tristique augue laoreet id. Aenean lobortis, mi sit amet pellentesque condimentum, lectus velit gravida diam, a consequat arcu magna eget diam. Phasellus in iaculis dolor, nec rhoncus dolor.</p>
                    </div><!-- .col-md-6 -->
                    <div class="col-md-6">
                        <div class="article-photo">
                            <img src="http://placehold.it/500x350" class="img-responsive" alt="article" />
                        </div>
                    </div>
                </div><!-- .row -->
            </div><!-- .col-md-10 -->
        </div><!-- .row -->
    </div><!-- .container-fluid -->
</body>

这里是JSFiddle.

我希望标题栏和侧边栏保留在原处，而不是随着内容滚动。我唯一想要滚动的是内容（蓝色）。

如何在 Bootstrap 中仅使用 CSS 实现此目的？

Answer 1

如果顶部部分是动态页面的一部分，我会阅读有关 Bootstrap 导航栏 (http://getbootstrap.com/components/#navbar) 的内容。一个非常强大的工具，比页面的简单滚动样式更具动态性。

为了简单回答您当前的 fiddle，您需要将滚动设置为溢出并在要滚动的 div(s) 上设置固定高度。将这些 css 属性添加到滚动的 divs 会按照您的描述进行。

style="overflow: scroll; max-height: 100px"

Fiddle 这里：http://jsfiddle.net/xb6k5vth/1/

仅使用 Bootstrap 滚动内容区域

Scroll content area only with Bootstrap

html

css

twitter-bootstrap