Sticky Footer with CSS Flexbox

<!doctype html> <html> <body> <main class="center"> <h1>Sticky Footer</h1> </main> <footer> <p>Feel free to use this code.<br>If you have any suggestions, please leave a comment.</p> </footer> </body> </html>
html { font-size: 62.5%; } body { display: flex; min-height: 100vh; flex-direction: column; text-align: center; font-family: "Source Sans Pro", sans-serif; font-size: 1.8rem; color: #333; background: radial-gradient(ellipse at center, #f5f5f5 0%,#ddd 100%); } .center { flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; } h1 { text-transform: uppercase; letter-spacing: 1px; word-spacing: 3px; } footer { font-size: 1.4rem; background: #333; color: #f1f1f1; box-shadow: 0 0 25px 0 rgba(0,0,0,.8); }
Expand for more options Login