Skip to content

Instantly share code, notes, and snippets.

@sarvar

sarvar/index.html

Created July 26, 2020 21:46
Show Gist options
  • Save sarvar/b31eb86f04800fb96c4d09f601520f15 to your computer and use it in GitHub Desktop.
Save sarvar/b31eb86f04800fb96c4d09f601520f15 to your computer and use it in GitHub Desktop.
Download ZIP
Sticky Footer with Flexbox
Raw
index.html
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
<p><button id="add">Add Content</button></p>
</div>
<footer class="footer">
Footer
</footer>
Raw
style.css
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
}
.content {
flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
}
.footer {
flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment