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.
.stickyFooter {
position: fixed;
bottom: 0px;
width: 100%;
overflow: visible;
z-index: 99;
padding-top: 5px;
padding-bottom: 3px;
background: white;
border-top: solid white 2px;
background-color: #89D4DF;
-webkit-box-shadow: 0px -5px 15px 0px #bfbfbf;
box-shadow: 0px -5px 15px 0px #bfbfbf;
height: 34px;
}HTML for CSS Sticky Footer
This is just a general idea of the HTML needed for your CSS sticky footer.
<body>
<div id="wrapper">
<p>lots of content</p>
</div>
<div id="stickyFooter">
<p>Content for sticky footer</p>
</div>
</body>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.
