2

I have a page where the sections of it are made of absolutely positioned div's.

That worked great until I tried to get a footer onto the page.

My problem is that I can't use the bottom property to put in a footer because the bottom property fixes it to the bottom of the screen, not the page. So when the page content is longer than the screen, then the footer goes under the content.

And I can't just put the footer at the bottom of the flow of elements because there is no flow of elements. All the div's are absolutely positioned so if I put in anything that is static or relatively positioned, it goes right to the top of the page underneath my header.

And none of those sticky footers work because they depend on the flow of elements to already put the footer at the bottom of the page.

Here is the jsbin: http://jsbin.com/oxefev/edit#javascript,html

This problem would be extremely easy to fix if there was a way to make the bottom css property go to the bottom of the page instead of the screen.

Edit: I could just make it static positioned and use the margin-top property to force it to the bottom of the page by setting it to margin-top:1000px; but then I would have to change that every time I added or removed content from the page.

5
  • This is likely because an page has no bottom limit, it could go on forever. Is there a reason you cannot simply give your footer an absolute position beyond your content?
    – Umbrella
    Feb 4, 2012 at 15:16
  • The page does have a bottom limit. Every page has a point where you can't scroll anymore. That is the point I would like to move it to. And I can just position it after the last element, but what if I make more than one page on the website? The footer on both pages won't be at the same height. And even if that wasn't an issue, I would have to change the height of the footer every time I changed the content on the page. No, that's just a bad idea. It would be so much simpler just to put it automatically at the bottom of the page. Feb 4, 2012 at 15:23
  • "no bottom limit" means you can always add more content below, pushing the bottom down. This makes the pixel location of "bottom" ambiguous.
    – Umbrella
    Feb 4, 2012 at 15:39
  • 1
    You should only use position: absolute as a way of achieving otherwise unachievable styles. If I remove position: absolute off all of your elements and add margin: auto to content-wrapper (and remove the crazy margin-top off the footer) then your site shows exactly how you are describing you want it. Feb 4, 2012 at 15:45
  • Yeah, but then all the elements that I took off that jsbin for user friendliness don't work correctly. I'm going to work on converting my page to use regular elements, but absolute positioning is just easier Feb 4, 2012 at 15:49

2 Answers 2

2

My first recommendation would be: don't absolutely position everything. What benefit is it?

Nevertheless, you can achieve what you seek with the tender application of javascript. Something like:

document.getElementById('footer').style.top = document.getElementById('content-wrapper').clientHeight + 150 + 'px';

EDIT:

This also seems to work and won't need alteration if you adjust your header height (+/- a few pixels based on box models):

document.getElementById('footer').style.top = document.body.clientHeight + document.getElementById('footer').clientHeight + 'px';
3
  • 1
    @MarkKramer Once you have made more than one website you will regret that comment. Feb 4, 2012 at 15:40
  • Also, good idea. I knew how to do that so I can't believe I didn't think of it =S Feb 4, 2012 at 15:43
  • I've made 4 websites and done work on several others. There is no reason not to absolutely position things. Feb 4, 2012 at 15:44
0

jQuery(document).height() returns correct, consistent cross-browser results for me. Once you know the height of the content positioning the footer should be easy.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.