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="Header" class="Row">
    <h1>Header (80px)</h1>
  </div>
  <div id="Content" class="Row">
    <h2>Content (auto)</h2>
  </div>
  <div id="Footer" class="Row">
    <h3>Footer (40px)</h3>
  </div>
</div>

CSS

html, body { height: 100%; margin: 0; }

.Frame {
  display: table;
  width: 100%;
  height: 100%;
}

.Row { display: table-row; }

body {
  background: #eee;
}

#Header {
  background: #aaa;
  height: 80px;
}

#Content {
  height: auto;
}

#Footer {
  background: #aaa;
  height: 40px;
}