I'm facing an issue with positioning a footer on my webpage, which is made up of div sections that are absolutely positioned. The problem arises because using the bottom property fixes the footer to the bottom of the screen rather than the bottom of the page. This causes the footer to go under the content when the page is longer than the screen.
Since all the div elements are absolutely positioned, I can't simply place the footer at the bottom of the flow of elements. Any element I try to position statically or relatively ends up going underneath the header at the top of the page.
The traditional sticky footer solutions won't work either, as they rely on the flow of elements to already have the footer placed at the bottom of the page.
If you want to see the code in action, check out this jsbin: http://jsbin.com/oxefev/edit#javascript,html
This issue would be easily resolved if there was a way to make the bottom CSS property stick to the bottom of the page rather than the screen.
Edit: One workaround could be setting the footer's position to static and using the margin-top property to force it to the bottom of the page by setting it to margin-top:1000px;, but this solution would require manually adjusting the margin every time content is added or removed from the page.