How to stick footer to bottom (not fixed) even with scrolling

Question

I\'m learning web development and I simply can\'t figure out what I\'m doing wrong on this. I want the footer of this page to stick to the bottom, below all content, but not fix

Answer 1

I'm using Bootstrap 4 and this worked for me: https://www.youtube.com/watch?v=yc2olxLgKLk

I did this way in the CSS file (base.css):

    html {
        height: 100%;
    }

    body {
        min-height: 100%;

        display: flex;
        flex-direction: column;
    }

    footer{
        padding: 3em;
        margin-top: auto;
    }

And I've linked the css file in the html (base.html):