CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
goodguy_cakephp
goodguy_cakephp

Reputation: 243

Bootstrap scrolling just a div and keep other content on top

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

I've read around that I should set the height on the body to 100% and then fix the 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>

Upvotes: 14

Views: 64523

Answers (2)

Sander Schaeffer
Sander Schaeffer

Reputation: 2827

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.

Upvotes: 23

Daniel van Flymen
Daniel van Flymen

Reputation: 11541

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.

Upvotes: 17

Related Questions