How to increase div's height with Zoom level/Screen resolution?

Could anyone of you help me resolve this issue. I have to implement the following layout:

Root div

   -Header  
   -Content

Footer div

There should not be any gap between the Root Div and the Footer. And the Footer should always stick to the bottom of the web page. So basically, if I zoom out or increase the resolution, the Content Div should increase in height.

Can any of you please tell me how to achieve this?

The divs look like this:

<header>
    <container>
        <content> ---> Has a gradient background
           <text>
           <image> ---> The bottom end of this image shou开发者_JAVA技巧ld be behind the footer, and when the screen resolution changes, the complete image should  display with the Gradient background extended until the footer.
<footer>

It is pretty much always an illusion - being that when you expand your page you're not getting more content. http://www.cssstickyfooter.com/ Putting a background image / color on your wrapper div would give you the likely result you're looking for.

Like so?:

<div id="root" style="height:100%;">
    Le root
</div>
<div id="footer" style="position:absolute;bottom:0px;">Le Footer</div>