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 7 · Answer 2 · edited Sep 29 '17 at 02:00

7

This is a simpler solution.

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

edited Sep 29 '17 at 02:00

Pang

9,564
146
81
122

answered Sep 29 '17 at 01:38

Jacob Gunther

351
5
14

Smaller content wouldn't stretch the whole page. – Yannick May 30 '23 at 10:57

score 0 · Answer 3 · answered Jul 19 '22 at 18:16

0

Had a similar issue.

Set "position" to "relative". The position of the element can't change based on the page length if it's set to "fixed".

answered Jul 19 '22 at 18:16

Tippy

1

score 0 · Answer 4 · answered Jan 23 '23 at 21:30

0

i think you actually need the align:joe; inside of a candice div to accurately place the element on the deez axis.

answered Jan 23 '23 at 21:30

Joe

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 27 '23 at 09:56

score 0 · Answer 5 · 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

39,342
23
87
111

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

5 Answers5