There are several tutorials on how to make a CSS sticky footers sticky header, or sticky sidebar.  This is one.

Remember to compensate at the bottom of your page so the CSS sticky footer doesn’t cover any content.  If your sticky footer is 75px high, add 80px padding or margin so that the CSS sticky footer doesn’t cover the content at the bottom of your page.  The 2 main CSS elements for the sticky footer are position: fixed; and bottom: 0px;

The important thing to understand about  position: fixed; in a CSS sticky footer is that it’s in a fixed position relative to the element or “container” it’s in.

 

CSS Sticky Footer

The main points for the CSS sticky footer are position: fixed; and bottom: 0px; Z-index helps keep it "on top" when the user scrolls.

 

HTML for CSS Sticky Footer

This is just a general idea of the HTML needed for your CSS sticky footer.

 

CSS Sticky Footer, Sticky Header, and Sticky Side Bar Demo

The demo link below has a CSS sticky footer, sticky header, and a sticky sidebar. Note where the HTML for the sticky side bar is within the “wrapper”(<div id=”wrapper”>). The sticky sidebar helps illustrate that it is in a fixed position relative to the “container” it’s within. The sticky footer and header are outside of the “wrapper.” The CSS sticky footer and header are fixed relative to the body tag. The body tag is the “container.” Also notice margins added to header and footer to compensated for sticky footer and header so that they don’t cover content the way the sticky sidebar does.

View Demo CSS Sticky Footer

 

Here is another CSS sticky footer from CSS-tricks.com

 

Are you most likely to make a CSS sticky footer, sticky header, or other? Please leave a comment.

 

One thought on “CSS Sticky Footer

  1. In the first part of your example, you declare a css “class” stickyFooter, while in the html part of your example you use a css “id”, you should use id or class in both of the parts of the example.

    Solving that little problem, it works great, thank you :)

    Reply

Leave a reply

required

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">