I’m trying to make a page where I have a fixed height header and footer. I want the header at the top, the footer at the bottom, and a content box (div) to be centered vertically and horizontally in the gap between the header and footer. If the content is taller than that gap, it would push the footer down. I’ve made a jsfiddle with the code as I’ve got it so far, but it only works if the content is shorter than the gap, and it doesn’t work at all in Internet Explorer (surprised?).
Thanks, that gets really close, but on Webkit browsers the footer sits just below the bottom of the screen.
Edit: I’ve updated my jsfiddle with what you came up with, including a few small fixes; however, I still haven’t figured out the issue with the footer being below the bottom of the window on webkit browsers. http://jsfiddle.net/UYpnC/4/
Ok that was due to the old opera fix which I’ve removed now and is working in Chrome and Safari. Newer versions of Opera should work without the previous fix.