How to keep header footer size and resize only the main body part?

Question

-----------------------------
Header (100%)
-----------------------------
 Center margin auto
|           | Desc  |
|unknown    |       |  
|   size    | 200px |
|           |       |
| Image fit |       |
|           |       |
|     A     |       |
|           |       |
|           |       |
-----------------------------
Footer 100% height stick bottom
-----------------------------

Basically, the site lay out is like MSNBC gallery. http://www.msnbc.msn.com/id/35385037/ns/news-picture_stories/displaymode/1247/?beginSlide=1

but I having trouble to get the A part to resize arcording to the resize. i have the ImageFit plugin for jquery to automatic resize the image to fit on the "A" part. But the problem is if I set the footer to absolute (a must since it suppose to stay at the bottom al the time) My A part will be overflow and the Image inside did not resize.

Is there anyway to make the A fit on between header and footer, while keep the header and footer on screen?

Answer 1

Give A a margin-bottom equal to the height of the footer.

Otherwise, the code shown here might help you too.