Bootstrap scrollable div

Question

I want to make a div that is always the height of the screen, even if it has more content in it. The div shows a list of , and if there are more than can be contained in the screen there will be a scrollbar on the side of the div.

<div class = "Row">
   <div class ="col-sm-2">
       <ul>
           <li>
               <h1>record1</h1>
           </li>
           <li>
               <h1>record2</h1>
           </li>
       </ul>
   </div>
</div>

I've searched online but only found answers that have nothing to do with my issue, like scrollable modals and other scroll issues. Please explain your answer fully with steps and full code.

I specifically added that last line because people answer in one word, assuming that I know what they mean. — MJH, Feb 17 '16 at 13:43
@Then I don't know the right keywords. I've tried every combonation I could think of and didn't find anything. — MJH, Feb 17 '16 at 13:44
@rosa you could have taken a look here: [link](http://stackoverflow.com/questions/13609531/how-can-i-make-a-div-100-of-window-height) and then here [link](http://stackoverflow.com/questions/21227287/make-div-scrollable) very basic search keywords on stackoverflow — Peter, Feb 17 '16 at 13:47
@ I can't use 100% or 100vh because I need it to fit the size of the screen, even after resize — MJH, Feb 17 '16 at 13:54
@rosa `I can't use 100% or 100vh because I need it to fit the size of the screen` - That's a pretty contradictory sentence. — Jay, Feb 17 '16 at 14:11
Working example using vh and % : https://jsfiddle.net/Laa87pkw/ — Jay, Feb 17 '16 at 14:14

Asons · Accepted Answer · 2016-02-17T14:00:14.270

A web page's body is by default only as high as the content one put into it, so we need to tell it to be full viewport height (the size of the browser window)

html, body {
  margin: 0;
  height: 100%;
}

Now, for your row div to also be full height, we give that to a height

.row {
  height: 100%;
}

And finally, for the scroll bar to appear when the content exceed the height, we add

.row {
  overflow: auto;
}

The background: #eee; I just added so you see that covers the whole browser window

The height: 100% will now make the row div to automatically fill up the entire viewport (browser window) no matter size or if one resize it.

Sample code snippet

html, body {
  margin: 0;
  height: 100%;
}
.row {
  height: 100%;
  background: #eee;
  overflow: auto;
}

<div class = "row">
   <div class ="col-sm-2">
       <ul>
           <li>
               <h1>record1</h1>
           </li>
           <li>
               <h1>record2</h1>
           </li>
           <li>
               <h1>record3</h1>
           </li>
           <li>
               <h1>record4</h1>
           </li>
           <li>
               <h1>record5</h1>
           </li>
           <li>
               <h1>record6</h1>
           </li>
       </ul>
   </div>
</div>

I can't use height: 100% because row doesn't have a fixed height. I need row to be the height of the screen automatically. — MJH, Feb 17 '16 at 13:52
@rosa It is exactly what `100%` do, make it `100%` of the browser window. — Asons, Feb 17 '16 at 13:54

Bootstrap scrollable div

1 Answers1