引導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

我希望我理解正確的你，如果不是隻是評論，我會更新！