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.
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';