css footer not displaying at the bottom of the page

Question

this is my code for my footer, how can i make it display at the bottom of the page rather than right underneath my content above it?

/*footer */
#footer .column          


        

Answer 1

I solved this by simply using min-height on the main container of my HTML.

So HTML:

    
My Nav Bar
    

        All my content
    
    

        My footer
    

and then CSS

.top-nav {
    height: 4rem;
}
.main-container {
    min-height: calc(100vh - 4rem - 4rem);
}
.footer {
    height: 4rem;
}

With SCSS you can use variables to track the top-nav and footer heights and then do something like

.main-container {
  min-height: calc(100vh - #{$top-nav-height} - #{$footer-height});
}

This is not a perfect solution because it won't put your footer exactly at the bottom of the viewport but it will push it down to the bottom when the content is too short and prevents the footer from being way up in middle of the screen.