Static footer, with attached and scaling overlap

Question

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!

Answer 1

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.

Answer 2

I've used jQuery height() with much success. It returns the computed height, which you can inspect in a $(window).resize() or $(document).resize() event.

Answer 3

After reading your diagram again, a possible HTML/CSS solution:

CSS

#footer { position: absolute; z-index:9999; background: url(...) no-repeat top center; height: (height of image); bottom: 0; left: 0; width: 100%; }

HTML

<div id="content"></div>
<div id="footer">This floats above everything else and remains at the bottom of the page.</div>

Try this and let me know.