不滾動的自舉列

Question

我有一個使用bootstrap製作的網頁，比如我在左邊使用4列，右邊使用6。我需要左邊的4不滾動。我如何實現這個目標？

我知道我可以使用

class="affix" 

在左邊的列，但這個問題是，左邊欄不再調整大小時的視口的大小變化。

Answer 1

這是一個解決方案。您需要設置overflow: auto，並在右列定義div嵌套：

.cell { 
 
    background: lightgreen; 
 
    border: 1px solid teal; 
 
    height: 100vh; 
 
    overflow: auto; 
 
} 
 
.data_cont { 
 
    height: 200vh; 
 
    background: lightblue; 
 
    margin: 0 -15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-4 col-xs-offset-1 cell"> 
 
     left column 
 
    </div> 
 
    <div class="col-xs-6 cell"> 
 
     <div class="data_cont">data in the right column</div> 
 
    </div> 
 
    </div> 
 
</div>