Jake Jake - 5 months ago 13
CSS Question

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

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

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.