I am in the process of designing a webpage layout using Bootstrap 3.3.7
On the left, I have a scrollable sidebar, and on the right, there is a simple element like an image.
My goal is to have a background image and color on the right side that covers the entire column without displaying a scrollbar since I only have one small element there.
https://i.sstatic.net/KKEpo.jpg
However, a scrollbar appears when you scroll down, leaving empty white space at the top of the sidebar.
https://i.sstatic.net/KrMQ7.jpg
If I can make the background color cover the right area without a scrollbar, the sidebar should adjust accordingly as there is no need for an overall scrollbar.
I tested overflow: hidden, but it did not produce the desired effect.
I am utilizing default bootstrap elements
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
... <!-- Sidebar content continues -->
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="background: purple;">
<div class="row placeholders" style="text-align: center;">
<img src="http://placehold.it/350x150">
</div>
</div>
</div>
</div>
And here is the CSS referenced:
...<!-- CSS styles continue -->
JSFiddle: View Example Here
Thank you for your help.