How to disable vertical scroll in bootstrap column

Question

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

Did you try adding overflow-y:hidden; to that particular div — acmsohail
– acmsohail, Commented Jul 20, 2017 at 5:54
set height: 100% on body, html and also in that left side element — bhv
– bhv, Commented Jul 20, 2017 at 5:55
Please edit your question, and add a minimal reproducible example — Mark
– Mark, Commented Jul 20, 2017 at 5:57

Rohit Sharma · Accepted Answer · 2021-02-23 10:17:48Z

3

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>

edited Feb 23, 2021 at 10:17

answered Jul 20, 2017 at 6:22

Rohit Sharma

3,3442 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Prisma Over a year ago

Its working now. actually it was problem with bootstrap cols. so i used div with width property set to 50%. and its working now. Thanks.

MJN · Accepted Answer · 2017-07-20 06:08:38Z

3

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

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

answered Jul 20, 2017 at 6:08

MJN

6531 gold badge7 silver badges20 bronze badges

Comments

Carsten · Accepted Answer · 2017-07-20 06:21:57Z

2

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.

answered Jul 20, 2017 at 6:21

Carsten

212 bronze badges

Collectives™ on Stack Overflow

How to disable vertical scroll in bootstrap column

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related