CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

Question

I have the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer which I can\'t make sit at the bottom of the page.

I wa

Answer 1

ONE line solution using Bootstrap

Apart from all the CSS and jQuery solutions provided,
I have listed a solution using Bootstrap with a single class declaration on body tag: d-flex flex-column justify-content-between

• This DOES NOT require knowing the height of the footer ahead of time.
• This DOES NOT require setting position absolute.
• This WORKS with dynamic divs that overflow on smaller screens.

html, body {
  height: 100%;
}

    
      
    

    

        

          
Header
        
        

          
Main
        
        

          
Footer