How to make a footer stick to the bottom of the page

Question

I have read all the tutorials on how to make the footer at the bottom of the webpage but still i'm unable to do it for my site.

The links i have referred are

None of it worked..!

CSS

#footer1 {
clear: both;
background-color: #333;
width: 1200px;
min-width: 100%;
width: 100%;
bottom: 0;
position: relative;
height: 50px;
border-top:5px solid #1b9bff;
}

Here is the dummy fiddle of my site

Fiddle

This is the fiddle i have tried but there is a bug in it too

http://jsfiddle.net/andresilich/fVpp2/1/

possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Karl Viiburg, May 05 '14 at 10:01
@KarlViiburg I have used the method which you have suggested in the link but still i'm unable to bring it to the bottom — Amarnath Balasubramanian, May 05 '14 at 10:03
@AmarnathBalasubramanian - you should include in your question exactly what your requirements are and what you have tried and show how the things you tried don't work. Then it's more likely someone will be able to help you. — Danield, May 05 '14 at 10:07
Try to simplify your website in a fiddle using the solutions mentioned in the above questions. — Danield, May 05 '14 at 10:10
have you tried this: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ — valerio0999, May 05 '14 at 10:39

wahid · Answer 1 · 2014-05-05T10:15:56.247

0

Try this:

<div id="container">
  <div id="content"></div>
</div>
<div id="footer">My Sticky Footer</div>

CSS:

html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }

#footer {
   clear: both;
   position: relative;
   z-index: 10;
   height: 3em;
   margin-top: -3em;
}

#content { padding-bottom: 3em; }

edited May 05 '14 at 10:15

answered May 05 '14 at 10:05

wahid

1,150
1
9
16

if you want to use this you should also add a padding equals the height of your footer to the body – valerio0999 May 05 '14 at 10:06
I don't want the footer to be fixed i want it to be at the bottom of webpage..!! – Amarnath Balasubramanian May 05 '14 at 10:07
Hey this didn't work in my case..! :( Thanks for your time..! – Amarnath Balasubramanian May 05 '14 at 10:29

4dgaurav · Answer 2 · 2014-05-05T10:33:44.070

0

Add/Edit as following

#body {
margin-bottom: 85px;
position: relative;
}

#footer1 {
position: fixed;
}

I guess this is what you want

* html #form1 {
    height:100%; 
}

#form1 {
    min-height: 100%;
    position: relative;
}

#body {
    padding-bottom: 50px; /* padding-bottom should be equal to the footer height (this keeps the footer from overlapping the content) */
}

#footer1 {
    position: absolute;
    width: 100%;
    clear: both;
    bottom: 0;
    padding: 0;
    margin: 0;
}

edited May 05 '14 at 10:33

answered May 05 '14 at 10:14

4dgaurav

11,360
4
32
59

i don't want the footer to be fixed i want it at the bottom of the page – Amarnath Balasubramanian May 05 '14 at 10:16
I am not getting you, footer at bottom of page? do you mean footer should be at bottom of page every time regardless of scroll position? – 4dgaurav May 05 '14 at 10:20

score 0 · Answer 3 · answered May 06 '14 at 22:38

Following the code of this method - you need to to:

1) Place your footer outside the form

2) Add height: 100% on form

3) Set negative bottom margin to form according to the height of the footer.

form {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -150px; /*footer 150px high */
}

Modified Fiddle

How to make a footer stick to the bottom of the page

Fiddle

3 Answers3