Sticky footer using `display: table;`
Based on the code at http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/. Thanks for getting this ball rolling! I made a few modifications based on a few things I noticed and some knowledge of recent containment hacks to expand IE6/7 support. I also wrote the Javascript to make the content expand as necessary in non-`display: table;` supporting browsers.
This code has been written, not tested. YMMV, please notify me at http://stackoverflow.com/questions/12119755/how-to-get-page-content-to-stretch-and-stick-footer-to-bottom-of-page/12119871#comment16205405_12119871 if you have problems.
HTML
<div class="Frame">
<div id="Footer" class="Row">
<h3>Footer (auto)</h3>
</div>
<div id="Content" class="Row Expand" style="background-color: red;">
<h2>Content (expands)</h2>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds <br>ssdsds
</div>
</div>
CSS
/*** The essential CSS needed for the layout ***/
html, body {
height: 100%;
margin: 0;
}
.Frame {
display: table;
width: 100%;
}
html>/**/body .Frame {
height: 100%;
}
.Row {
display: table-row;
}
html>/**/body .Row {
height: 1px;
}
/* Contain floats and fix margin collapse issues in IE6/7 */
.Row {
*zoom: 1;
}
html>body .Row.Expand {
height: auto;
}
/*** Some other CSS for the look ***/
body {
background: #999;
}
#Content {
background: #ffc;
}
#Footer {
background: #cfc;
}
p, h1, h2, h3 {
margin: 10pt;
}