Css align to bottom of page

Question

I want my footer to always be on the bottom and move to adjust to the size of the content inside the page. Right now I have dynamic content that covers the footer because it's to much content.

How can I fix my CSS:

div#Footer {
  width: 100%;
  height: 80px;
  padding: 1px;
  -moz-border-radius: 35px;
  border-radius: 35px;
  background-color: Black;
  color: #ffffff;
  position: fixed;
  bottom: 0;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

possible duplicate of [CSS sticky footer](http://stackoverflow.com/questions/3906065/css-sticky-footer) — Jakub, Jan 19 '12 at 16:46

score 13 · Answer 1 · edited Mar 31 '20 at 17:21

Its a little unclear what you want but this code has worked well for me.

Credit - http://css-tricks.com/snippets/css/fixed-footer/

#footer {   
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

score 6 · Answer 2 · edited Sep 29 '17 at 02:00

6

This is a simpler solution.

#footer {
    bottom: 0%;
    position: fixed;
}

edited Sep 29 '17 at 02:00

Pang

9,073
146
84
117

answered Sep 29 '17 at 01:38

Jacob Gunther

341
5
14

score 6 · Accepted Answer · edited Apr 21 '17 at 11:23

6

This has been asked countless times, you are looking for a Sticky Footer.
Simply follow the link there, this is a well known technique and they offer all the source code there.

edited Apr 21 '17 at 11:23

jao

17,666
15
61
95

answered Jan 19 '12 at 16:44

Jakub

20,262
8
63
92

3

There is no link, what link? – Celsiuss Mar 16 '22 at 18:29

score 0 · Answer 4 · answered Jan 19 '12 at 16:42

0

You need to post more html/css to be positive of what is going on here, but it sounds like your footer is being covered by your content page. If this is the case then setting a z-index on the footer will probably sort the issue.

z-index: 1000;

This can also typically be sorted by making sure your footer appears at the end of your html, as elements declared later appear on top of previous ones.

answered Jan 19 '12 at 16:42

mrtsherman

38,596
21
85
109

I have Dynamic content that can be long or short. I need that footer to adjust to the page content length. isnt the z index jsut controling layers? – CsharpBeginner Jan 19 '12 at 17:36
You can't use a `fixed` footer then. Just place your footer at the end of your html and it will be at the end of your content. – mrtsherman Jan 19 '12 at 17:38

Css align to bottom of page

4 Answers4