Here’s a simple way to keep the footer on the bottom of the page with minimum modifications.

👍 fixed to the end of the page

👍 dynamic height

👍 responsive

👍 not sticky

We are keeping footer outside body:

# application.html
<!DOCTYPE html>
# application.scss

html {
    margin: 0;

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

footer {
    margin-top: auto;

That’s it! 🤠