How to disable vertical scroll in bootstrap column

问题:

I have two bootstrap columns "left" and "right"; I want to fix the left column with the screen and disable scroll. but i want to enable scroll in the right column which would have more content. Basically i want to display posts such that the post heading would display in left column and the post content would display in right column Exactly like this . Note: I have used overflow-y: hidden; but it did'nt worked. This is what i want to achieve: https://blog.squarespace.com/blog/introducing-promotional-pop-ups

this is my code for left col:

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

This is css code:

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

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

回答1:

Just make the left column fixed. You don't need to use overflow-y, it is used when you need scrolling within the element.

.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">
		Fixed
	</div>
	<div class="col-xs-9 pull-right scrollable">
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	</div>

回答2:

Just add positon:fixed and height:100% to your left column and add data to your right column

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

回答3:

You can achieve this by simply applying some CSS:

• Both columns should have a height of your complete viewport -> height: 100vh;
• The scrollable column should also have overflow-y set to scroll.

Here is an example: https://jsfiddle.net/kLu69r7t/

.fixed-col {
  height: 100vh;
}

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

Of course you need to give the columns the respective classes.