How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?

Question

I haven\'t added content to my page yet, since I\'m still working on the header and footer. I noticed that my footer, instead of being at the bottom of the page, like it would b

Answer 1

this is because your content has nothing so footer will go up.

Here I have solution If your structure is like this

HTML

 header content goes here    
 main content 
 footer part 

CSS

header { // header definitions  }
.container { 
       min-height: 500px;
       // other definitions  
}
footer { // footer definitions  }    

This will stick your footer below 500px of content even if content is empty.