Halnex Halnex - 1 month ago 6
CSS Question

Can't get "col" background color to cover the entire area without a scrollbar in Bootstrap

I am trying create a simple page layout using Bootstrap 3.3.7

I have a scrollable sidebar on the left and a simple element on the right a simple element like an image.

I would like to add a background image and color on the right side that covers the entire column without having a scrollbar because it is really not needed as I onnly have 1 simple and small element there.

enter image description here

However, a scrollbar appears and when you scroll down, the sidebar remains fixed but an empty white space appears at the top of it.

enter image description here

If I can get the background color to cover the right area without the scrollbar, I think the sidebar would fix it self as there is no need for an overall scrollbar.

I tried

overflow: hidden
but that didn't do anything.

I am using 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>
<ul class="nav nav-sidebar">
<li><a href="">Nav item</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
<li><a href="">More navigation</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
<li><a href="">More navigation</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
<li><a href="">More navigation</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
</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

html, body, .container-fluid {
height: 100%;
}

.sidebar {
display: none;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 52px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #273646;
}
}

/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}


/*
* Main content
*/

.main {
padding: 20px;
}
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}


JSFiddle: https://jsfiddle.net/halnex/3qkgyn0w/5/

Thank you.

Answer

You can add this:

.container-fluid {
  height: auto;
  }

and

 body {
  background: purple; 
}

(.container-fluid has height: 100% otherwise, which is added to the navbar height, which again results in an overall height of more than 100%, hence the scrollbar.)

https://jsfiddle.net/2nn39oqm/

Comments