I have a unique need for ALL the webpage content to be aligned to the bottom. The reason is the body has a background image. If zoomed out, the content goes up with the page which happens to not be too readable because of the clouds in the image. So if someone zooms out the content needs to stay at the bottom where the lower part of the image is.
The problem is
position: absolute:
bottom : 0;
Doesn't work because if they zoom in, or if the browser window is too short to fit all the content, and no scroll bar appears.
I have no idea how to fix this, without using dirty hacks.
How can I make the wrapper div (all the content) stay at the bottom like a footer when there is no other content, and not loose content when zooming in?
I am open to JS solutions if that is the only way.
EDIT:
One of the answers seem to think I am refering to CSS zoom. I am not. I am talking about browser zoom, ie Ctrl +
JSFIDDLE: http://jsfiddle.net/7hnBF/light/
Light Result (not inside iframe): http://fiddle.jshell.net/7hnBF/show/light/
Note, real page is not all text, so text alignment css is not an option.
