how to get an element to snap to the bottom of the screen without using fixed position

Question

the footer element needs to snap to the bottom of the screen, but it cannot use fixed position because if the content is too long it will still be there.

http://creative.edulence.com/colonnade-properties/

currently the CSS:

#footer {
background-color: black;
min-height: 40px;
padding-top: 70px;
width: 100%;
position: relative;
}

right now, if your screen is small it displays correctly, but if it's too big there is a gap underneath the footer

you should look into this: http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height — Rodik, Mar 29 '12 at 14:46

score 1 · Accepted Answer · answered Apr 10 '12 at 12:37

1

See How to keep footers at the bottom of the page by Matthew James Taylor for a demo of how to do this.

I've done it many times with great success

answered Apr 10 '12 at 12:37

joeljoeljoel

633
1
6
8

score 0 · Answer 2 · answered Mar 29 '12 at 14:49

Something you could try is wrapping it in a div and give that div a padding-bottom of the height of the footer and then give that wrapper div a position relative and the footer an absolute position of bottom: 0px. I don't see why that wouldn't work although not able to test atm.

If that doesn't work try adding the height of the footer to the height of the wrapper div using jquery.

So something like

$('#wrapper').height($(this).height() + $('#footer').height());

That'll get it there and use the same position elements :)

how to get an element to snap to the bottom of the screen without using fixed position

2 Answers2