Stretching height of page to full screen

[itziklevy]

Hello,

I am designing a website which uses dynamic height. Some pages though are very small, so the bottom half of the screen is just plain white. How do I make the content area fill the full screen (without making the height fixed)?

My code looks something like this:

CSS:

.overall {
height: 100%;
width: 100%;
}

.content {
width: 900px;
height: 100%;
}

.content #left {
width: 300px;
height: 100%;
}

.content #right {
width: 600px;
height: 100%;
}

HTML:

<div class="overall">
<div class="content">
<div id="left">side navigation here</div>
<div id="right">main content here</div>
</div>
</div>

[downtime]

Try setting the min-height: 100&#37;. That should make the minimum height of your divs 100% and they can go over that (creating a scroll).

[gsm85]

Hi,

Try to set position:absolute for the main container, before that the padding and margin should be zero for non scrollable page.

thanks