スクロールしないブートストラップカラム

Question

私はブートストラップで作成されたWebページを持っています。たとえば、左側に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>