Sticking my footer to the bottom of the page

Question

My footer doesn't want to stick to the bottom of the page. I'm new to HTML and I cant get it to go down.

Here's my code:

<div class="footer">
    Copyright &copy; 2013. All rights reserved
</div>

This question has a duplicate. [Make footer stick to bottom of page correctly](http://stackoverflow.com/q/3443606/1371589) — jhedm, Aug 30 '13 at 00:21

score 1 · Answer 1 · answered Aug 30 '13 at 00:20

Simple Fixed Solution:

.footer {
   position: fixed; 
   bottom: 0;
}

Simple Absolute Solution:

.footer {
   position: absolute; 
   bottom: 0;
}

Fancier Sticky Footer:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: red;
}

score 0 · Answer 2 · edited May 23 '17 at 10:25

There are several questions on StackOverflow like this, one such question is the following...

How to align footer (div) to the bottom of the page?

... and I've given an answer to that question.

If you don't feel like navigating to the answer, here's two quick links:

If this isn't what you're asking, or you need help with the implementation, let me know! I hope this helps.

Sticking my footer to the bottom of the page

2 Answers2