Make a relative positioned 100% height div in Bootstrap - html

Question

I'm trying to make a sidebar on the left hand side of the page with the content to the right of it. the problem I'm running into is that when I try to make the div 100% height, I have to set it to position: absolute; which causes the content to overlap the sidebar.
Here is my HTML
<div class="row">
<div class="sidebar col-sm-3">
<ul>
<li class="active">
<h3>Link</h3>
</li>
<li class="">
<h3>Link</h3>
</li>
<li class="">
<h3>Link</h3>
</li>
<li class="active">
<h3>Link</h3>
</li>
</ul>
</div>
<!-- sidebar -->
<div class="sidebar-content col-sm-9">
<ul>
<li class="active">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
</ul>
</div>
<!-- sidebar-content -->
</div>
<!-- row -->
And my CSS
.sidebar {
background: #eee;
height: 100%;
padding-top: 100px !important;
}
.sidebar-content ul li {
display: none;
}
.sidebar-content ul li.active {
display: block;
}
.sidebar-content {
position: relative;
right: 0;
padding: 100px;
}
Can anybody tell me how to make the div relative and 100% height or a better way to go about creating a sidebar?
Fiddle: https://jsfiddle.net/3Lapzoyf/3/

Answer 1

Solution:
Add a height of 100vh (which is a length unit representing 1% of the viewport height). This will result in a sidebar that has a height of 100% of the viewport height. Also make sure you have your row(s) inside a .container or .container-fluid when you are using Twitter Bootstrap (if you didn't do that already).
HTML:
<div class="container-fluid">
<div class="row">
<div class="sidebar col-sm-3">
<ul>
<li class="active">
<h3>Link</h3>
</li>
<li class="">
<h3>Link</h3>
</li>
<li class="">
<h3>Link</h3>
</li>
<li class="active">
<h3>Link</h3>
</li>
</ul>
</div><!-- sidebar -->
<div class="sidebar-content col-sm-9">
<ul>
<li class="active">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
<li class="">
<h2 class="underline">Link</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum assumenda sequi praesentium aperiam. Accusamus omnis velit quos sint quas corporis inventore, facilis laborum pariatur explicabo maxime voluptas at aliquid!</p>
</li>
</ul>
</div><!-- sidebar-content -->
</div><!-- row -->
</div>
CSS:
.sidebar {
background: #eee;
height: 100vh;
padding-top: 100px;
}
.sidebar-content ul li {
display: none;
}
.sidebar-content ul li.active {
display: block;
}
.sidebar-content {
padding: 100px;
position: relative;
right: 0;
}
Fiddle: https://jsfiddle.net/3Lapzoyf/4/