Keep element at the bottom of page

Question

How can I keep an element at the bottom of the page?

Applying bottom: 0; is likely a solution, but how do you actually keep it at the bottom?

Example: http://giphy.com/gifs/80s-guitar-mask-ToMjGpu0xa3M2nHDKWA

In this example, the footer div remains at the bottom of the page despite any browser size.

This does not keep it at the bottom of the page, it keeps it at the bottom of the browser window: http://jsfiddle.net/8o0xLug9/

You've got to be able to find this somewhere besides asking. Try inspecting the element with Firebug or view their CSS. It's right there. — Leeish, Aug 08 '14 at 19:44
`
` placed after the `` will always show up after the body (unless you position certain elements that cover it) If you want a div to act as a footer, you can add this css to a `
` at the end of your body tag: `div{position:absolute;right:0px;left:0px;bottom:0px;height:100px;}` where height can be changed to your preferred height. If you want the footer to always remain on screen, change `position:absolute` to `position:fixed` — ctwheels, Aug 08 '14 at 19:47
Looking at your fiddle, if you want it to remain there, change position to fixed — ctwheels, Aug 08 '14 at 19:53
@ctwheels then it covers elements if the browser is too small in height. — O P, Aug 08 '14 at 20:00

Alessandro Incarnati · Answer 1 · 2014-08-08T20:10:02.153

0

If you inspect the element you can see that it is absolute positioned:

#footer {
-webkit-transition: .5s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-width: 967px;
height: 60px;
background-color: #212121;
margin: 0 0 0 0;
}

To keep it the footer at the bottom give it position:absolute; bottom:0;

In your case remove min-height:100%; from the html tag to make the footer stick to the bottom of the page and not create more padding at the bottom so to avoid to scroll the page to see the footer.

Adding body { position: relative; } will add the footer to the bottom of the page.

edited Aug 08 '14 at 20:10

answered Aug 08 '14 at 19:48

Alessandro Incarnati

6,288
3
32
52

This does not keep it at the bottom of the page, it keeps it at the bottom of the browser window: http://jsfiddle.net/8o0xLug9/ – O P Aug 08 '14 at 19:51
Can you post a screenshot of what you are trying to achieve? – Alessandro Incarnati Aug 08 '14 at 19:53
Zoom out of the page I sent you - the footer always stays at the bottom of the page; now zoom into the page, the footer is still at the bottom page. – O P Aug 08 '14 at 19:55
1

add `body { position: relative; }` :: this will snap the footer to the bottom of the body not the bottom of the HTML element. – JRulle Aug 08 '14 at 20:05
Also, good point. I will edit my answer with your comment. Thank you – Alessandro Incarnati Aug 08 '14 at 20:06

score 0 · Answer 2 · answered Aug 08 '14 at 20:06

The Real Reason http://giphy.com/gifs/80s-guitar-mask-ToMjGpu0xa3M2nHDKWA is having footer at the bottom of the page is the height of content.

so if you have a page with very less content ,Adding a minimum content height can help(as follows)

<section>
main content Area

</section>

use a minimum height like so

section{
min-height:800px;
}

Footer will automatically come down to bottom of screen(as the length of page is big).

Keep element at the bottom of page

2 Answers2