How do I make my footer stay at the bottom as Stackoverflow's?

Question

I wonder how I make my footer stick to the bottom as Stackoverflow's.

If I give it a position:absolute and bottom:0px; it stays at the same place. Nor I want a position:fixed; one.

I've been searching the web for a while now but I can't find the right solution. Thankful for every answear!

[Sticky footer](http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page) — azeós, Feb 03 '14 at 20:51
Can you be more specific on what you want the footer to do? Your example of StackOverflow isn't clear because StackOverflow's footer doesn't do anything special... — TypeIA, Feb 03 '14 at 20:51
Ok, the sticky footer is just what I needed, thank you guys alot! — Gabriel Lindgren, Feb 03 '14 at 20:53
[http://www.cssstickyfooter.com/](http://www.cssstickyfooter.com/) is probably the easiest way to do it. — Geoffrey Burdett, Feb 03 '14 at 20:55

score 0 · Accepted Answer · answered Feb 03 '14 at 20:51

0

You're probably looking for a sticky footer. You can find an example at CSS tricks

answered Feb 03 '14 at 20:51

NielsPilon

Ok, thanks! I will accept the answear in 8 min. – Gabriel Lindgren Feb 03 '14 at 20:54
Currently this is a comment, not an answer. Answers are expected to contain enough information that they could stand alone. If you're going to include resources from a linked page, it's important to quote the relevant information so that the content is maintained if the link no longer works. – zzzzBov Feb 03 '14 at 20:55
Oh thanks for mentioning that as I'm still a StackOverflow answer newbie. Will keep it in mind for the next question. – NielsPilon Feb 03 '14 at 20:58

aebmad · Answer 2 · 2014-09-18T17:34:07.950

0

The simple answer would be to add the clear: both property to your CSS footer class.

edited Sep 18 '14 at 17:34

answered Feb 03 '14 at 20:57

aebmad

score 0 · Answer 3 · edited Feb 03 '14 at 20:57

0

Please go through the links below for working Examples:

   #footer {
    position: absolute;
    bottom:0;
    width: 100%;
    background-color:#CCC;
    color:#333;
    padding:20px;
}

Hope this helps.

edited Feb 03 '14 at 20:57

zzzzBov

answered Feb 03 '14 at 20:57

Jatin

RemusT · Answer 4 · 2014-02-03T21:57:58.583

0

You can try adding this css to the footer class:

HTML:

<div class="footer">
   <p>Copyright 2013</p>
</div>

CSS:

.footer{
width: 100%;
position:relative;
bottom: 0; //fixes the footer to the bottom of the page.
height: 80px;
}

edited Feb 03 '14 at 21:57

answered Feb 03 '14 at 21:28

RemusT

4 Answers4