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.

• Khalid T.: Maybe you've searched online using the wrong keywords?
• MJH: I specifically added that last line because people answer in one word, assuming that I know what they mean.
• MJH: @Then I don't know the right keywords. I've tried every combonation I could think of and didn't find anything.
• Peter: @rosa you could have taken a look here: link and then here link very basic search keywords on stackoverflow
• Jay: Working example using vh and % : jsfiddle.net/Laa87pkw

Answer 1

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>

• MJH: 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.
• Asons: @rosa It is exactly what 100% do, make it 100% of the browser window.