Scrolling divs not scrolling to bottom of content - html

Question

I have 2 scrolling divs (outlined in red) that will not scroll to the their respective bottoms. I can't seem to seem to figure out what to tweak to fix it.
The thick outlined box is a simulated browser window.
http://jsfiddle.net/jsk55rfb/4/
HTML
<div class="container">
<div class="header"></div>
<div class="sidebar"></div>
<div class="main">
<div class="detail-container">
<div class="top-info"></div>
<div class="items-container">
<div class="item blue"></div>
<div class="item orange"></div>
<div class="item blue"></div>
<div class="item orange"></div>
</div>
</div>
<div class="main-container">
<div class="main-header"></div>
<div class="main-content">
<div class="item grey"></div>
<div class="item purple"></div>
<div class="item grey"></div>
<div class="item purple"></div>
<div class="item grey"></div>
<div class="item purple"></div>
<div class="item grey"></div>
<div class="item purple"></div>
</div>
</div>
</div>
</div>
CSS
.container {
height: 500px;
width: 500px;
border: solid 3px black;
overflow: hidden;
}
.header {
height: 25px;
background-color: #333;
right: 0;
left: 0;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
width: 75px;
margin-top: 35px;
border: solid 1px grey;
}
.main {
height: 100%;
padding-left: 75px;
}
.main-container {
width: 65%;
height: 100%;
}
.main-content {
height: 100%;
overflow-y: scroll;
border: solid 1px red;
}
.main-header {
height: 20px;
border: 1px solid black;
}
.detail-container {
float: right;
width: 35%;
height: 100%;
border: solid 1px grey;
}
.top-info {
padding: 75px 0;
}
.items-container {
height: 100%;
overflow-y: scroll;
border: solid 1px red;
}
.item {
padding: 100px 0;
}
.blue { background-color: blue; }
.orange { background-color: orange; }
.grey { background-color: grey; }
.purple { background-color: purple; }
.content {
width: 65%;
height: 100%;
}

Answer 1

You have a fixed height for the container and overflow set to hidden. Since the divs exceed that height, the overflow can't be seen.
Try this:
.container {
height: 500px;
width: 500px;
border: solid 3px black;
overflow: scroll;
}
.header {
height: 25px;
background-color: #333;
right: 0;
left: 0;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
width: 75px;
margin-top: 35px;
border: solid 1px grey;
}
.main {
height: 100%;
padding-left: 75px;
}
.main-container {
width: 65%;
height: 100%;
}
.main-content {
height: 100%;
overflow-y: scroll;
border: solid 1px red;
}
.main-header {
height: 20px;
border: 1px solid black;
}
.detail-container {
float: right;
width: 35%;
height: 100%;
border: solid 1px grey;
}
.top-info {
padding: 75px 0;
}
.items-container {
height: 100%;
overflow-y: scroll;
border: solid 1px red;
}
.item {
padding: 100px 0;
}
.blue { background-color: blue; }
.orange { background-color: orange; }
.grey { background-color: grey; }
.purple { background-color: purple; }
.content {
width: 65%;
height: 100%;
}
<div class="container">
<div class="header"></div>
<div class="sidebar"></div>
<div class="main">
<div class="detail-container">
<div class="top-info"></div>
<div class="items-container">
<div class="item blue"></div>
<div class="item orange"></div>
<div class="item blue"></div>
<div class="item orange"></div>
</div>
</div>
<div class="main-container">
<div class="main-header"></div>
<div class="main-content">
<div class="item grey"></div>
<div class="item purple"></div>
<div class="item grey"></div>
<div class="item purple"></div>
<div class="item grey"></div>
<div class="item purple"></div>
<div class="item grey"></div>
<div class="item purple"></div>
</div>
</div>
</div>
</div>

Answer 2

I could solve this with some javascript. This should addapt to any content size of your other blocks as long as the markup structure doesn't change.
Good luck!
$(function(){
//creating vars based on jquery objects
$itemsContainer = $('.items-container');
$mainContent = $('.main-content');
$container = $('.container');
$header = $('.header');
$mainHeader = $('.main-header');
//calculating heights
var containerH = $container.height();
var headerH = $header.height();
var mainHeaderH = $mainHeader.height();
//assigning new height to main-content class
$mainContent.css("height", (containerH - headerH - mainHeaderH) + "px");
//similar operation for items-container
//creating vars based on jquery objects
$topInfo = $('.top-info');
//calculating heights
var topInforH = $topInfo.outerHeight(); //since in your example top-info has no content only padding, you will need to use the method outerHeight instead of height
//assigning new height to main-content class
$itemsContainer.css("height", (containerH - headerH - topInforH) + "px"); });
By the way, I updated your jsfiddle with my solution, so you can test it.

Answer 3

When you use a height of 100% it sets it to the full height regardless of other sibling elements. So they are at 100% of the parent element but then the headers are pushing them down. You will have to use fixed heights on all elements. Or set one to 20% and other to 80% etc.
.main-content { width: 452px; }
.items-container {width: 352px; }