CODEWITHSUNDEEP
csslayouthtml
user935524
user935524

Reputation: 1

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 should be behind the footer, and when the screen resolution changes, the complete image should  display with the Gradient background extended until the footer.
<footer>

Upvotes: 0

Views: 2304

Answers (2)

Shivan Dragon
Shivan Dragon

Reputation: 15219

Like so?: 

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

Upvotes: 1

mikevoermans
mikevoermans

Reputation: 4007

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.

Upvotes: 2

Related Questions