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

Question

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

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

我已经尝试使框溢出:滚动，但显然滚动两列。有什么想法吗？

代码如下:

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

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