Loyal Tingley Loyal Tingley - 1 year ago 177
CSS Question

CSS Sticky Footers with Unknown Height

Is there any way to stick a footer to the bottom of the browser screen or right after the content (depending on which is longer) using CSS without knowing the size of the footer in advance?

Right now I am using the absolute positioning in a container that holds the footer and the content with container's min-height as 100%, but if I change the footer I find I must change the padding at the bottom of the container to match its height.

Answer Source



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.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download