Skip to content

Instantly share code, notes, and snippets.

@shiftgeist

shiftgeist/footer-at-bottom.html

Last active September 19, 2018 09:05
Show Gist options
  • Save shiftgeist/2b19d487dc2d783147cd06ba87b30d0c to your computer and use it in GitHub Desktop.
Save shiftgeist/2b19d487dc2d783147cd06ba87b30d0c to your computer and use it in GitHub Desktop.
Download ZIP
footer-at-bottom: Footer at min 100% height bottom
Raw
body-example.html
<body>
<header></header>
<main>No matter what length</main>
<footer>the footer will still be at the bottom or below #internetthesedays</footer>
</body>
Raw
style.scss
body {
display: flex; //give the body flex
flex-direction: column; //reset flex to "normal" html
min-height: 100vh; //minimum of 100% height (browser output window)
}
footer {
margin-top: auto; //set footer to bottom or below main, when larger than 100% height
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment