Bootstrap scrollable column with 100% height

Question

I have 2 columns using bootstrap, I am trying to have the right column to have overflow-y: scroll while hiding the scrollbar on html, body

The problem is, the scroll bar appears but it is disabled and unscrollable.

This is my HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-8 text-center" id="left">
    <p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p><p>Left contents</p>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4" id="right">
        <p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p><p>Right contents</p>
        </div>
    </div>
</div>

CSS

body, html {
  margin: 0;
  overflow: hidden;
  height:100%;
}
#left {
    background-color: #FC6E51;
}

#right {
    background-color: #4FC1E9;
}

#left, #right{
  text-align: center;
  height:100%;
  overflow-y: scroll; 
}

What am I doing wrong?

JSFiddle https://jsfiddle.net/ensc5uy1/9/

EDIT what @Chris and @Ben provided works inside JSFiddle but when I apply it in my application it doesn't work. I've created a new JSFiddle with my entire CSS and it works in there but no inside my app. I don't know what's going on

https://jsfiddle.net/5td0acad/

Answer 1

The problem is you are not setting height to the parent containers of #left and #right divs.

You have to specify height: 100% to parent containers, i.e. .container-fluid and .row. However, I added additional class .parent to the .row container, because adding height: 100% to the .row class may affect the rest of the application layout. You may choose a better suiting name for your application.

You also have to set overflow: auto, in order the scrolbars to show only when there is overflow.

You can see it in action below:

body, html {
  margin: 0;
  height:100%;
}
body{
  overflow: hidden;
}
#left {
    background-color: #FC6E51;
}

.container-fluid, .parent{
  height: 100%;
}

#right {
    background-color: #4FC1E9;
}

#left, #right{
  position: relative;
  float: left;
  text-align: center;
  height:100%;
  overflow-y: auto; 
}

<div class="container-fluid">
  <div class="row parent">
    <div class="col-xs-12 col-sm-12 col-md-8 text-center" id="left">
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents</p><p>Left contents</p>
      <p>Left contents END</p>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4" id="right">
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents</p><p>Right contents</p>
      <p>Right contents END</p>
    </div>
  </div>
</div>

Answer 2

You need to add this to your CSS

.container-fluid, .row{
  height:100%;
}

JSFiddle

You are using 100% height for both columns whilst they take up the entire width so only the left will show as it is taking up 100% of the page height. I'm assuming you are going to display them side by side otherwise you will only see one of the columns.

Answer 3

Alter CSS like this:

Height in vh instead of %

#left, #right{
 text-align: center;
 height:100vh;
 overflow-y: scroll; 
}