Search code examples
htmlcssfooter

How to set footer at bottom and push down as content increases?

I want to design a footer such that it should be at bottom of the webpage when there is less content in the body and should be pushed down if the content of the body reaches to footer.
If I do like this

 footer{
   position: absolute;
   bottom: 0;
   width: 100%;
 }

It doesn't go down if the body content increases.How can I do that?
please help me. Thanks in advance.

Solution

  • Here's a working jsfiddle

    You can use padding-bottom: with the same height of your footer to achieve the effect:

    #body {
   padding:10px;
   padding-bottom:60px;
}