I am attempting to design a left sidebar on my webpage with the main content positioned to the right of it. However, I am facing an issue where setting the sidebar div to 100% height requires using position: absolute; which causes the content to overlap the sidebar.
Below is my HTML code:
<div class="row">
<div class="sidebar col-sm-3">
<ul>
<li class="active">
<h3><a href="">Link</a></h3>
</li>
<li class="">
<h3><a href="">Link</a></h3>
</li>
<li class="">
<h3><a href="">Link</a></h3>
</li>
<li class="active">
<h3><a href="">Link</a></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 - ->
Also, here is my CSS code:
.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;
}
If anyone knows how to make the div relatively positioned while maintaining it at full height or has suggestions for a better approach in creating a sidebar, please advise.
Fiddle Link: https://jsfiddle.net/3Lapzoyf/3/