GitHub Download

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%;
}

Subscribe

Get the latest Publii news, updates and more delivered directly to your email inbox

You can change your mind at any time by clicking the unsubscribe link in the footer of any email you receive from us, or by contacting us at contact@tidycustoms.net. By clicking below, you agree that we may process your information in accordance with our Privacy Policy.