title: How to increase div's height with Zoom level/Screen resolution?
body: <p>Could anyone of you help me resolve this issue. I have to implement the following layout:</p>
  
  <pre>
  Root div
  
     -Header  
     -Content
  
  Footer div
  </pre>
  
  <p>There should not be any gap between the <code>Root Div</code> 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.</p>
  
  <p>Can any of you please tell me how to achieve this?</p>
  
  <hr>
  
  <p>The <code>div</code>s look like this:</p>
  
  <pre><code>&lt;header&gt;
      &lt;container&gt;
          &lt;content&gt; ---&gt; Has a gradient background
             &lt;text&gt;
             &lt;image&gt; ---&gt; The bottom end of this image should be behind the footer, and when the screen resolution changes, the complete image should  display with the Gradient background extended until the footer.
  &lt;footer&gt;
  </code></pre>