a footer position:fixed to viewport bottom, but with a height limit

In this sample, we have a (very fat) footer that is fixed to the bottom of the page. When viewing with a short viewport, it overlays the header and body. Is there any way to keep the footer outside certain开发者_如何学JAVA minimum distance from the top, with css only?

Have tried min-height and height on body and #outW, but nothing has any effect.

http://jsfiddle.net/2XsNH/1/

(move the bottom of the browser window way up to see the yellow footer lay over the header)

sorry if my description of the problem fell short, but this is what I was looking for -

http://ryanfait.com/sticky-footer/

the problem was that my first instinct, position:fixed, won't ever work, because an element with fixed positioning is completely broken out of the document flow. So the above page uses a negative margin trick on the content area to make room for the header.

I think the only way to do this in pure CSS is to give the main contents a position: relative and a z-index of, say, 10, and the footer one of 9.