How to create a fixed footer

Sometimes you may need to keep the footer at the bottom of the page, regardless of the page height content. I found many solutions, but almost all of them use too much code, require the use of display flex or grid for the entire page or are script-based. Below you can find my, very simple CSS-based solution, I hope it works for you too:

<body>
  <footer></footer>
</body>
body {
   min-height: 100vh;
   position: relative;
}

footer {
   position: sticky;
   top: 100%;
}

This article was updated on November 3, 2019

Bob Mitro

Bob is a co-founder of the Publii project and a web designer and front-end web developer with over thirteen years of professional experience in the design industry.