DEV Community

Discussion on: How to make your footer stick to the bottom of your page

View post
Collapse
 
stephanie profile image
Stephanie Handsteiner • • Edited

Also possible using grid, obviously.

Something like this, written on my mobile phone, thus not tested, but that should stick the footer to the viewport's bottom.

<div class="content">Some content not filling the viewport</div>
<div class="footer">Footer</div>
Enter fullscreen mode Exit fullscreen mode 
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}
body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows: 1fr auto;
}
.footer {
    background: #000;
    color: #fff;
    grid-row: 2 / 3; 
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
vgolfk profile image
O, George. MWS. •

That was really easy. Thank you so much