DIV 100% within DIV, keeping footer sticky - html

Question

Goals:
"page-wrap" (blue background) must extend height of entire page.
Also keep footer at bottom of page.
Footer cannot overlap sidebar/content.
Problem:
Adding height:100% to #container causes footer to overlap when window resized, and adds blank space under footer caused by header
I've tried dozens of different configurations, but cannot seem to reach my goals.
http://jsfiddle.net/fZmut/3/
<div id="container">
<div id="header">header</div>
<div id="page-wrap">
<div id="inside">
<div id="sidebar">
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
</div>
<div id="flow-content">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</div>
css
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
/* height:100%; */ /* causes footer to overlap when window resized, and adds blank space under footer caused by header */
min-height: 100%;
position:relative;
margin: 0px auto 10px;
background-color: black;
}
#header{
background-color:green;
width:100%;
border-bottom: 2px solid black;
}
#page-wrap {
background: blue;
width: 450px;
margin: 0px auto 10px;
height:100%;
}
#page-wrap #inside {
margin: 0px 10px 0px 10px;
padding-top: 10px;
padding-bottom: 20px;
}
#sidebar {
width: 50px;
float: left;
padding-left: 0px;
padding-top: 0px;
background-color: gray;
}
#flow-content {
background-color: yellow;
padding-left: 50px;
padding-top: 1px;
padding-right: 15px;
}
#footer {
background: #fff;
border: 1px solid black;
height: 20px;
width: 430px;
margin: 0 10px;
bottom: 0;
position: absolute;
}

Answer 1

You Can add 100% to #container and resolve the 2 issues you mentioned:
make the header absolute position to take care of the extra height issue. (but then you'll need to add extra padding to the blue area to accomodate.
also Make the footer display like a table row and its parent table to take care of the overlapping issue:
#header{
background-color:green;
width:100%;
border-bottom: 2px solid black;
**position:absolute;**
}
#page-wrap {
background: blue;
width: 450px;
margin: 0px auto 10px;
height:100%;
**display:table;
padding-top:20px;**
}
#footer {
background: #fff;
border: 1px solid black;
height: 20px;
width: 430px;
margin: 0 10px;
**display:table-row**
}
http://jsfiddle.net/fZmut/7/