Pixelbird of Have A Nice Day
12/30/2016 - 2:31 PM

Sticky Footer with Flexbox

Sticky Footer with Flexbox

sticky_footer.md
content_copyfile_download
  • Rendered
  • Source

This method will make sure the footer sticks to the bottom, even when there is not enough content to fill up the full height of the page.

Markup:

<body>
  <header>Website</header>
  
  <main>
    Page content
  </main>
  
  <footer></footer>
</body>

css:

body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main{
  flex: 1;
}

DEMO