Bootstrap 2 列一个需要滚动而另一个固定位置

Question

所以我有一个非常具体的设计，涉及一个框内的 2 列。

左栏将保持在框的高度范围内，但右栏会更长，因此需要滚动。我正在使用 bootstrap 并且需要让右栏滚动而左栏不移动。

我已经尝试制作方框 overflow:scroll 但显然这会滚动两列。有什么想法吗？

代码如下：

html:

<div class="fluid-container">
    <div class="row">
        <div class="col-xs-12 outer">
            <div class="row">
                <div class="col-xs-4 leftcol">
                    This content needs to stay put while scrolling (aka fixed)
                </div>
                <div class="col-xs-8 rightcol">
                    This content Scrolls<br>This content Scrolls<br>
                    This content Scrolls<br>This content Scrolls<br>
                    This content Scrolls<br>This content Scrolls<br>
                    This content Scrolls<br>This content Scrolls<br>
                    This content Scrolls<br>This content Scrolls<br>
                    This content Scrolls<br>This content Scrolls<br>
                    This content Scrolls<br>This content Scrolls<br>
                    This content Scrolls<br>This content Scrolls<br>
                </div>
            </div>
        </div>
    </div>
</div>

css:

.outer {
    border:solid 1px #000;
    height:200px;
    overflow:hidden;
}

.leftcol {
    border:solid 1px green;
}

.rightcol {
    border:solid 1px red;
    overflow:scroll;
    height:200px; /* I WANT THIS TO BE IMPLIED RATHER THAN STATIC */
}

http://jsfiddle.net/snoapps/z8h0drsb/

Answer 1

我取出了隐藏在包装纸上的溢出，但给了.rightcol一个高度，然后应用了overflow-y: scroll。

CSS:

.outer {
    border:solid 1px #000;
    height:200px;
}

.leftcol {
  /* position: fixed;
   top: 0%;
   left: 0%; */
   border:solid 1px green;
   overflow:hidden;
}

.rightcol {
   /* border:solid 1px red;
   position: relative;
   top: 0%;
   left: 50%;  */
   border:solid 1px red; 
   overflow-y: scroll;
   height: 200px;
}

左边固定，右边滚出屏幕。

CODEPEN DEMO

希望我理解正确，如果不只是发表评论，我会更新！

Bootstrap 2 列一个需要滚动而另一个固定位置

Bootstrap 2 columns one needs to scroll while other fixed position

css

scroll

overflow

twitter-bootstrap