I have been asked by a client to create a site where the content area overlaps the footer. However they also want the footer to be attached to the bottom of the viewport, which I've done, but it seems that I can't find a good way to vertically stretch the content to maintain the overlap should the browser be resized.

I've created a diagram to help explain, http://www.squaresphere.co.uk/images/footer-diagram.png

So ideally I need a way of calculating the height of the content and stretching the content div if content_length > viewport.height, but keep a min-height if content_length < viewport.height

A solution using html+css would be fantastic, but I'm starting to think that I'm going to have to do some funky jQuery onviewportresize or something

Any suggestions would be awesome, thanks!