Your issue can be easily fixed by using flexbox. Just wrap your .container and your .footer in a flex container with a min-height: 100vh, switch the direction to column so that they stack on top of each other, and justify the content with space between so that footer will move to the bottom.
.flex-wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: space-between;
}
<div class="flex-wrapper">
<div class="container">The content</div>
<div class="footer">The Footer</div>
</div>