ブートストラップカラムの垂直スクロールを無効にする方法

Question

"left"と "right"の2つのブートストラップカラムがあります。私は画面と左の列を修正し、スクロールを無効にしたい。しかし私はより多くの内容を持つ右の列のスクロールを有効にしたい。基本的に私は、投稿の見出しが左の列に表示され、投稿の内容が右の列に表示されるように投稿を表示したい。thisのように。注：私はoverflow-y: hidden;を使用しましたが、動作しませんでした。これは私が達成したいものです：https://blog.squarespace.com/blog/introducing-promotional-pop-ups

これは左コルのための私のコードです：

<div id="main" class="col-md-6 left-half "> 
    <h2 style="diplay:inline-block">Intrigue</h2> 
    <input id="morearticlesbtn" class="button" type="button" onclick="openNav()" value="More Articles "> 
    <div class="row"> 
    <div class="post-meta col-md-6"> 
     <p>July 18, 2017</p> 
     <p>By: James Crock</p> 
     <a href="#"> Transport</a> 
    </div> 
     <div class="col-md-6"> 
      <div class="line"></div> 
     </div> 
    </div> 


    <div class="title-div"> 
    <h1 class="title">Squarespace Sponsors 2017 D&AD New Blood Awards</h1> 
    </div> 

    <div class="row"> 
     <div class="col-md-9" > 
      <div class="line bottom-line"></div> 
     </div> 
    <div class="col-md-3 bottom-line-text"> 
    <h4>Next</h4> 
    </div> 

    </div> 
    </div> 

これは、CSSコードです：

.left-half{ 
    height: 100%; 
    overflow-y:hidden; 
    position: fixed; 
    bottom: 0; 
    height: 100vh; 

} 
.left-half h2{ 
    display: inline-block;   
} 

Answer 1

左の列を固定してください。 overflow-yを使用する必要はありません。要素内でスクロールが必要な場合に使用されます。

.fixed {position: fixed !important; top: 0px; left: 0px; bottom: 0px; background: red;} 
 
.scrollable {background: yellow;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="col-xs-3 fixed"> 
 
\t \t Fixed 
 
\t </div> 
 
\t <div class="col-xs-9 pull-right scrollable"> 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t <br /><br /><br /><br /><br />Scrollable 
 
\t </div>

Answer 2

ちょうどあなたの左の列にpositon:fixedとheight:100%を追加し、右側の列にデータを追加する

https://codepen.io/anon/pen/JJgjqX

Answer 3

あなたは、単にいくつかのCSSを適用することによって、これを達成することができます

• どちらの列があなたの完全なビューポートの高さを持っている必要があります - >高さ：100VH。
• スクロール可能な列には、overflow-yをスクロールするように設定する必要があります。ここで

例です。もちろんhttps://jsfiddle.net/kLu69r7t/

.fixed-col { 
    height: 100vh; 
} 

.scrollable-col { 
    height: 100vh; 
    overflow-y: scroll; 
} 

あなたが列にそれぞれのクラスを提供する必要があります。