Tag Archives: fixed header

How to: Anchor the Footer to Bottom of Page (or Header to Top)!


46 Comments - LEAVE A COMMENT

Update 2/1/2015 – Final update! I have made the final version completely simpler and completely responsive! Disregard this version and all others. The only version you should read and download is the New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Versions).

Yesterday I discussed another method of creating a full width header and footer while still keeping your interior content centered. I’m going to expand on this method, and show you how to take the full width footer you’ve created and anchor it to the bottom of the browser window so the page’s content scrolls underneath it.

At some point I’m sure you’ve encountered this technique along your web travels. Some call it a static footer, others fixed position, others a “sticky footer“. Whatever you call it, it remains anchored to the very bottom of the page, no matter how much you scroll.