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

Question

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.

Possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Pardeep Dhingra, Jan 07 '16 at 12:55
search 'sticky footer' - here's [one example](http://stackoverflow.com/a/26090114/703717) of mine — Danield, Jan 07 '16 at 12:57

score 3 · Accepted Answer · answered Jan 07 '16 at 13:06

3

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;
}

answered Jan 07 '16 at 13:06

fnune

5,256
1
21
35

score 0 · Answer 2 · edited Feb 15 '18 at 19:20

0

Change your position to "relative". When you use "absolute" you fix it to a particular position which in this case is at the bottom the startup screen. Using relative will position the footer relative to other elements on the page. If other element change their position, so is the footer.

edited Feb 15 '18 at 19:20

Stephen Kennedy

20,585
22
95
108

answered Feb 15 '18 at 18:59

user3065272

1

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

2 Answers2