CSS Height 100% + overflow: auto not showing all of nest content
Basically I have a one page HTML app with everything fixed position, and I only want one pane to have scrollable content. Everything is working as expected, but I'm unable to scroll to the bottom of my inner content container. I've tried moving everything to abs pos, I've tried all the solutions I've been able to find on SO that are related, but no dice. Here is a fiddle (http://jsfiddle.net/yhhjL/) and here is a crude mock of my mark up and CSS:
HTML
<header>
<p>Company</p>
</header>
<div class="fixed-row-one"></div>
<div class="fixed-row-two"></div>
<div class="fixed-stage-left">
<div class="scrollable">
<table cellpadding="0" cellspacing="0">
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
</tr>
<tr>
<td>Last</td>
<td>Last</td>
<td>Last</td>
<td>Last</td>
</tr>
</table>
</div>
</div>
<div class="fixed-stage-right"></div>
CSS
body {
margin:0;
padding: 0
}
header {
width: 100%;
height: 50px;
position: fixed;
background: black;
color: white;
}
.fixed-row-one {
width: 100%;
height: 50px;
position: fixed;
top: 50px;
background: #AAA;
color: white;
}
.fixed-row-two {
width: 100%;
height: 50px;
position: fixed;
top: 100px;
background: #e51837;
color: white;
}
.fixed-stage-left {
width: 50%;
height: 100%;
position: fixed;
overflow: hidden;
top: 150px;
left: 0;
background: #f1f1f1;
color: #000;
}
.scrollable {
width: 100%;
height: 100%;
background: #262626;
overflow: auto;
position: absolute;
}
.scrollable table tr{
width: 100%;
height: 50px;
color: white;
border-bottom: 1px solid #CCC;
}
.fixed-stage-right {
width: 50%;
height: 100%;
position: fixed;
overflow: hidden;
top: 150px;
right: 0;
background: #0cf;
color: #000;
}
Any ideas would be much appreciated.
Answer
The problem was that the fixed-stage-left element was going off of the page, so the problem wasn't it scrolling to the bottom. The element was just being cut off.
By removing fixed-stage-left's height and replacing it with
.fixed-stage-left {
width: 50%;
top:150px; /*Edited here */
bottom:0; /*Edited here */
position: fixed;
overflow: hidden;
top: 150px;
left: 0;
background: #f1f1f1;
color: #000;
}
This forces the browser to adjust the height to fit between these two positions.
More on this type of problem here: CSS: Setting width/height as Percentage minus pixels