How to do you get a footer to stick to the bottom of the page?

Question

I require my footer to stick to the bottom of the page. Currently sticks to the bottom when the view port is full and doesn't extend. However when I use a smaller resolution I get a vertical scroll bar, and the footer remains where the view port was originally and doesn't stick to the bottom of the page.

Link: http://cazdesigns.net/caz/pictures.html

Any help would be appreciated. I have tried multiple techniques which only seem to work in the view port and not when vertically scrolling is involved.

what techniques you tried, can we see only the 1st one? – Kheema Pandey May 06 '15 at 07:13 — Kheema Pandey, May 06 '15 at 07:13

score 1 · Answer 1 · answered May 06 '15 at 07:16

1

You need to use position:fixed; add the following to your CSS:

#footer{position:fixed;}

answered May 06 '15 at 07:16

xengravity

3,501
18
27

score 0 · Answer 2 · answered May 06 '15 at 07:24

Just merege this css code with your css:-

html { min-height:100%; float:left;} 
body { min-height:100%; float:left; position:relative;}
#footer { position:absolute; bottom:0; left:0; width:100%; padding-top:25px;}

And remove Postion:relative from #gallery div...

How to do you get a footer to stick to the bottom of the page?

2 Answers2