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!
I would cheat and make the footer contain the overlapping part. Then just make the main content extend to the bottom. (In this case the lines on the left and right.)
No stretching is needed by your code — the visual display has the illusion of stretching when the browser resizes — which is all that is needed.