Bootstrap scrolling just a div and keep other content on top

Question

A bit like facebook. I've 4 columns and i want that scroll just work on one of that columns content.

I've read arround that I should set height on body to 100% and then fix height on that div that I want to scroll. No success yet.

<div class="col-lg-12"> 
   <div class="col-lg-2"></div> 
   <div class="col-lg-6"></div> <!-- div that I want scroll -->
   <div class="col-lg-1"></div>
   <div class="col-lg-3"></div>
</div>

Answer 1

To scroll the div along with the page, when the user scrolls, use

.col-lg-6 {
  position:fixed;
}

To have the content within that column scrollable, use

.col-lg-6 {
  height: 200px; // Set this height to the appropriate size
  overflow-y: scroll; // Only add scroll to vertical column
}

If this does not solve your problem, please update your question and clarify it. :)

"I've read arround that I should set height on body to 100% and then fix height on that div that I want to scroll" - You don't necessary have to have a 100% body height to get this working. However, you should have a static height on the column if you want the content inside scrollable. If you just want to have the column fixed on the page, as said in the first of my two suggestions, you don't need a height specified. That's why it's only written in the second solution.

Answer 2

You should not override the Bootstrap classes explicity, rather add a class to your div and style that:

<div class="col-lg-12"> 
   <div class="col-lg-2"></div> 
   <div class="col-lg-6 h-scroll"></div>
   <div class="col-lg-1"></div>
   <div class="col-lg-3"></div>
</div>

Then your css would look like:

.h-scroll {
    height: 90vh; /* %-height of the viewport */
    position: fixed;
    overflow-y: scroll;
}

If you want to mimic Facebook, it is better to use viewport units (vh, vw instead of hard-setting the height in pixels. You can check the compatibility here.