How to put my footer always on the bottom of my page?

Question

How can I have a footer which always stays at the bottom of my page even if this page is too little to fill the entire screen or more ?

I have a button in my page, and when you touch it, it adds thanks to javascript many elements to my page and the page size changed, but my footer doesn't adapt its position.

The problem is when I set the position of my footer to relative, when my page size is too short, he is not at the bottom of my screen, but just under the last element I put on.

I tried position: absolute;, but when the user clicks on the button, my footer stays stuck at his position and it doesn't go to the new bottom of my page.

I don't want my footer to be always visible, but just to be at the real bottom of my page.

have a google for sticky footer or check out one of my solutions here: http://stackoverflow.com/questions/23651942/css-single-column-layout-centered-fixed-width-100-height-w-header-and-footer/23657083#23657083 — Pete, Aug 25 '16 at 08:33
Why the f*** is every answer voted down? We bring good answers, where you does not even post code :\ — Tobias S, Aug 25 '16 at 08:36
Because it's a cheap way to score reputation points on a question that has been answered tons of times. I haven't voted down anything though, that is. Prefer to flag it for moderator intervention. — roberrrt-s, Aug 25 '16 at 08:39
So helpful users are punished, because they do not know, that this is a duplicate? — Tobias S, Aug 25 '16 at 08:42
Are you telling me you didn't come up with the thought this question could have been answered in the same manner 'somewhere' on this site? — roberrrt-s, Aug 25 '16 at 08:45
It's not me who vote down ! And it's not a duplicate, I already have searched on stackoverflow. It's because in my page I have a button which dynamically changes my page size. But the footer doesn't place its position correctly. — testa abalez, Aug 25 '16 at 08:47
@testaabalez it is a duplicate, if you have a look at the link above, you can use the layout in the answer and add as much content as you like to the main div (via ajax or not) and the footer will be at the bottom of the viewport if there is not enough content, or at the bottom of the page if the page is longer than the viewport — Pete, Aug 25 '16 at 08:59

score 0 · Answer 1 · edited Aug 30 '16 at 07:46

The complete solution is explained in this article: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Major trick is, that you will have three parts: Header, Body and Footer:
HTML:

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS:

html,
body {
   margin: 0;
   padding: 0;
   height: 100%;
}
#container {
    min-height: 100%;
    position: relative;
}
#header {
   background: #ff0;
   padding: 10px;
}
#body {
   padding: 10px;
   padding-bottom: 60px;   /* Height of the footer */
}
#footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 60px;           /* Height of the footer */
   background: #6cf;
}

score 0 · Answer 2 · answered Aug 25 '16 at 08:35

0

Use this:

footer {
  position: fixed;
  bottom: 0;
  /* Add a height and a width! */
}

answered Aug 25 '16 at 08:35

MAESTRO_DE

433
2
17

Why do you vote it down? It works! – MAESTRO_DE Aug 25 '16 at 08:37
2

@Option actually I downvoted this one because it uses position fixed and the OP has clearly stated: *I don't want my footer to be always visible, but just to be at the real bottom of my page.* – Pete Aug 25 '16 at 08:41
@Marcel1997 this isn't the answer OP wants. Actually there's no answer into it. He just need to put the footer at the last parent element. – hdotluna Aug 25 '16 at 08:43
He added it later! When i answered, this does not stand there! – MAESTRO_DE Aug 25 '16 at 08:44

score -1 · Answer 3 · answered Aug 25 '16 at 08:33

-1

Use the following

footer { position: absolute; bottom: 0; }

answered Aug 25 '16 at 08:33

IronAces

1,857
1
27
36

"_I tried `position: absolute;`, but when the user clicks on the button, my footer stays stuck at his position and it doesn't go to the new bottom of my page._" – Andreas Aug 25 '16 at 08:34
@Andreas `bottom: 0;` – IronAces Aug 25 '16 at 08:35

score -2 · Answer 4 · answered Aug 25 '16 at 08:33

-2

try this one... this will keep your footer at the bottom of your page:

 position: fixed;
  bottom: 0;

Working demo: https://jsfiddle.net/maky/bgeLbpd9/

#footer {
  position: fixed;
  bottom: 0;
  background-color: black;
  min-width: 100%;
  font-family: Agency FB;
  transition: height 3s;
  height: 50px;
}

#footer1 {
  text-align: center;
  color: #4e4e4e;
}

#footer:hover {
  opacity: .8;
  color: white;
  height: 100px;
}

answered Aug 25 '16 at 08:33

fernando

814
1
9
24

OP Stated: *I don't want my footer to be always visible, but just to be at the real bottom of my page.* – Pete Aug 25 '16 at 08:35

How to put my footer always on the bottom of my page?

4 Answers4