Footer that stays at the bottom of the window or page

Ever wanted a footer for an HTML page that stays at the bottom of the content, or of the page if the page is longer than the window? The footer on this site does just that. 

Here’s how. Let’s start with the basic code:

  1. <div id="shadow">
  2.     <main>
  3.         ...
  4.     </main>
  5.     <footer>
  6.         footer content
  7.     </footer>
  8. </div>

The code comes from this site and the id attribute on the div actually provides for the CSS shadow effect on this site, so I’m continuing to use this instead of using the body tag directly for relative positioning so that you can also use this site’s source if you wish. It also provides for a min-height of 100%

To get the footer to be positioned at the bottom, we position it absolutely. But this requires that it’s parent be positioned somehow – in this case it is positioned relative. The parent also has to fill the entire height of the browser, at a minimum, which means its parent must also – I do that here with the body tag. Finally we simply specify a bottom of zero to get the footer at the bottom.

So the final code, with all the relevant styling in the HTML style attribute for brevity is:

  1. <body style="height: 100%;">
  2.   ...
  3.   <div id="shadow" style="min-height: 100%; position: relative;">
  4.     <main>
  5.       ...
  6.     </main>
  7.     <footer style="position: absolute; bottom: 0;">
  8.       footer content
  9.     </footer>
  10.   </div>
  11. </body>