不滚动的自举列

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>