How to make 100% div height between header and footer? - css

Question

Problem here: http://jsfiddle.net/x8XZ6/3/
HTML
<div id="top"></div>
<div id="content">Why this div is not 100% height? I need this to fill all the way to the start of the footer if content is to little. If content extends beyond the blue footer, it should push the footer down.</div>
<div id="anchored-footer"></div>
CSS
* { margin: 0; padding: 0 }
html { height: 100%; }
body {
position: relative; min-height: 100%;
height: 0;
/* height: 0; interestingly, if height is set to 0, it expands 100% (see also #content margin-bottom) */
/* but I need it to extend up to the blue bar only. */
}
#top {
height: 50px;
background-color: red;
}
#anchored-footer {
position: absolute;
bottom: 0;
height: 50px;
background-color: blue;
width: 100%;
}
#content {
border: 5px solid green; /* because I need this border to go all around the content area */
background-color: yellow;
height: 100%;
/* margin-bottom: -50px; can a negative margin work here? */
}
Can this be achieved without using absolute positioned header?

Answer 1

You DO need to change BODY to height:100%;
working demo
css
* { margin: 0; padding: 0 }
html { height: 100%; }
body {
position: relative; height: 100%;
}
#top {
height: 50px;
background-color: red;
}
#anchored-footer {
bottom: 0;
height: 50px;
background-color: blue;
width: 100%;
}
#content {
border: 5px solid green; /* because I need this border to go all around the content area */
background-color: yellow;
min-height:calc(100% - 110px);
}
*Notice: No position:absolute is used at all.. you don't need it, especially if you want your content to push your footer down.. then definitely don't use absolute.

Answer 2

I would recommend doing the below:
body {
position: relative;
min-height: 100%; /* to fill screen 100% even with less content */
height: 100%; /* to allocate only 100% height */
}
#top {
height: 50px;
background-color: red;
top: 0;
}
#anchored-footer { /* No absolute positioning */
height: 50px;
background-color: blue;
width: 100%;
}
#content {
border: 5px solid green;
background-color: yellow;
min-height: calc(100% - 110px); /* allocate the remaining height except the header + footer + borders and assign as minimum height */
height: auto; /* allow content to expand when height exceeds the min height */
}
Demo | Demo with lot of content

Answer 3

If you ara not worrying about IE8 browsers then you can use calc property to achieve this.
html, body{width:100%;}
#content {
border: 5px solid green;
background-color: yellow;
height:calc(100% - 110px); /* 50px header + 50px footer + 10px border */
}
DEMO