CSS: 4 row fluid with scrollable center? - html

Question

We're building an application to run on both desktop and mobile, so we're making our site as dynamic as we can.
In the new design, we've got a full width, fixed top, fixed-height header, followed by a max-width header, fixed position header, max-width footer bottom-fixed, and a center scrollable area to fill up the rest of the vertical space.
I've got the headers and footers fixed and seemingly working right, but the center body isn't filling the center space.
Here's the code and fiddle I've been working in: http://jsfiddle.net/chazthetic/KE5cX/2/
<div id="top">
<div style="float:left;color:white;">a<br /></div>
<div style="float:right;color:white;">a<br /></div>
</div>
<div id="sub">
<div id="mid">
<div id="inside">
<div id="insideHeader">
<div style="float:left;color:white;">a<br /></div>
<div style="float:right;color:white;">a<br /></div>
</div>
<div id="insideInner">
<div id="div" style="float:left;color:white;">a
<div id="div" style="float:right;color:white;">1
</div>
</div>
<div id="bot">
<div style="float:left;color:white;">a<br /></div>
<div style="float:right;color:white;">a<br /></div>
</div>
</div>
</div>
And the accompanying CSS:
* {
margin: 0;
}
html, body {
margin: 0;
}
#top {
height: 100px;
width: 100%;
background: #f00;
z-index: 5;
margin:0px;
padding:0px;
position:fixed;
top:0px;
}
#sub {
position:relative;
width: 100%;
margin:100px 0 0;
height:100%;
}
#mid {
background: #222;
width:100%;
max-width:400px;
height:100%;
margin:0 auto;
}
#push {
height: 150px;
}
#inside {
width:100%;
height:100%;
padding:0 0 0 0;
margin:50px 0 50px;
overflow:auto;
}
#insideHeader {
height:50px;
background: #0ff;
width:100%;
margin:100px auto 0;
top:0px;
position:fixed;
max-width:400px;
}
#insideInner {
height:100%;
width:100%;
display:table;
overflow:auto;
}
#inside #div {
height: 50px;
width: 50px;
background: #888;
border: 1px solid #fff;
}
#bot {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
max-width: 400px;
background: #0ff;
z-index: 2;
margin:0px auto;
left:auto;
right:auto;
}
Am I missing something to make the inside div work right? Is this solution even possible?

Answer 1

I figured it out!
Turns out it is possible and I was missing height:100%; on the body tag.
Once I added that, the center area filled up the space and voila, it scrolled! I also needed to add a bit of padding to the insideInner div (thanks #alireza) so the header didn't overlay any of it.