CSS Sticky Footers with Unknown Height



For a site with a header, content area, and footer:

  1. Set html, body {height: 100%;}

  2. Set your body (or a wrapper div) to display: table; width: 100%; height: 100%;

  3. Set your header, footer, and content area to display: table-row;. Give your header and footer height: 1px;, and give your content area height: auto;

    The header and footer will both expand to fit their content. The content area will expand to fit the larger of its content, or the available space.


Leave a Comment