css - 两个固定列和一个可滚动的中心

Question

我试图让两个侧栏保持固定，而中间的栏可以滚动。虽然右侧的列保持固定，但我的左侧列的内容不在其范围内。它的内容溢出，占据了整行。因为它是最先定义的，所以它出现在其他容器的后面。如何让它粘在左边而不溢出？

<div class = "row">
        <div class=" container col-lg-2 col-md-2 col-sm2" id="left-sidebar">
                        <div class="panel panel-default affix">
                            <div class="panel-heading">Skill-Set</div>
                    <div class="panel-body" align="justify">

                    </div>
                <div class="well">
                    <ul class="nav ">

                </div>
                <!--/.well -->
            </div>
            </div>

        <div class="container col-lg-8 col-md-8 col-sm-8">
            <div class="jumbotron">
                <h2>Who am I?</h2>
                <p align="justify">Stuff
                </p>
            </div>
            <hr>
        </div>

        <div class=" container col-lg-2 col-md-2 col-sm2" id="right-sidebar">
            <div class="panel panel-default pull-right affix">
                    Stuff
                    </div>
                </div>
        </div>
    </div>

Answer 1

您需要在 CSS 中使用的是属性

overflow-y: auto / hidden

这是一个 JSFiddle向您展示如何使用 CSS 实现 2 个固定和 1 个滚动的 3 列设计。