How can I force my footer to stick to the bottom of any page in CSS?

Question

This is my code:

#footer {
   font-size: 10px;
   position:absolute;
   bottom:0;
   background:#ffffff;
}

I\'ve no idea what is wrong with

Answer 1

I struggled to find a solution, as none of the suggested achieved what I wanted:

• If there is to less content, stay at the bottom of the page, not in the middle.
• If there is enough content, do not be stick and overlap the content, just stay at the bottom.
• Hide it from the first sight, so only if the user scrolls down the footer is seen.

This is what worked for me:

html:

  

    

      Page
    
  
  

    Footer here
  

css:

body {
    height: 100%;
    width: 100%;
}

.page-wrapper {
  min-height:100vh; /*1vh = 1% of browser screen height*/
}

footer{
    position: relative;
    width: 100%;
    bottom: 0px;
}

Here in action.