How can I stick the footer at the bottom of the page

Question

How can i set the footer for different pages on the following site:

http://www.optimimo.com/

http://www.optimimo.com/home/contact

I am little confused on how to fix the footer at the bottom of different pages.

[Google](https://www.google.com/search?q=ryan+fait+sticky+footer&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a) will help you — Mr. Alien, May 22 '13 at 11:25
Sir how can i fix the footer for different page the position will be fixed. — Sumit Mehta, May 22 '13 at 11:30
Thanks for your question! However, this has been closed as "Too Localized" because you have not included the relevant code here, in your question. This means once your issue is fixed, or the link breaks, this question won't be useful to help anyone in the future who shares your issue. If you can edit in the relevant code/information, this may be able to be reopened. — Andrew Barber, May 22 '13 at 12:03

score 1 · Accepted Answer · answered May 22 '13 at 11:26

1

Add height:100% to html, body and #pagewidth

Now add position:absolute; bottom:0 to footer

#pagewidth {
width: 100%;
height: 100%;
overflow: auto;
}
#footer {
font-family: 'PT Sans',Arial,Helvetica,sans-serif;
width: 100%;
background-color: #2d2d2d;
overflow: hidden;
padding: 24px 0;
margin: 20px 0 0;
color: #fff;
position: absolute;
bottom: 0;
line-height: 16px;
}

answered May 22 '13 at 11:26

Sowmya

26,684
21
96
136

Ah i was just about to answer the same thing. It is correct though. – Marco Geertsma May 22 '13 at 11:27
This is the wrong solution – Mr. Alien May 22 '13 at 11:28

score 0 · Answer 2 · answered May 22 '13 at 11:38

try this

#footer {
    background-color: #2D2D2D;
    bottom: 0;
    color: #FFFFFF;
    font-family: 'PT Sans',Arial,Helvetica,sans-serif;
    line-height: 16px;
    margin: 20px 0 0;
    overflow: hidden;
    padding: 24px 0;
    position: absolute;
    width: 100%;
}

score 0 · Answer 3 · answered May 22 '13 at 11:39

Here's what I did (@Sowmya, you forgot to take care of some edge-cases)

html { height: 100%; }
body {
    min-height: 100%; /* Otherwise your page will have no background if the content is longer than one screen-height */
    position: relative; /* To let the footer allways be on page-bottom, not at one-screen-height */
}

#pagewidth { padding-bottom: 5em /* aprox. the height of the footer ... */ }

footer#footer { position: absolute; bottom: 0; left: 0; right: 0; width: 100% /* Fixes some IE mis-alignments ... */ }

If you want the footer always to be at the bottom of the screen, set the footer to position fixed.

How can I stick the footer at the bottom of the page

3 Answers3