how to set height to the main div? - css

Question

I need to stretch main div height to the view-port height and place the footer at the bottom of the screen. could anybody solve this?
body{text-align:center;}
#main{width:200px;margin:0px auto;background:#cccccc;}
#header{height:20px;background:#00FFFF;}
#content{height:80px;background:#cccccc;}
#footer{background:#0000FF;height:20px;}
.demo{width:90%;margin:0px auto;}
<div id="main">MAIN
<div id="header" class="demo">HEADER</div>
<div id="content" class="demo">CONTENT</div>
<div id="footer" class="demo">FOOTER</div>
</div>

Answer 1

This way of doing it works pretty well: http://www.xs4all.nl/~peterned/examples/csslayout1.html

Answer 2

You could try 'position:fixed; bottom: 0px' on the footer div.

Answer 3

That will work fine, but could be a problem if the content-height gets bigger than the screen size.. if the box main can be at 100% screen size then i would try something like this:
#main{
position:relative;
min-height:100%;
height:100%;
height:auto !important;
}
#footer{
position:absolute;
bottom:0px;
}
All the heigth values are just to make the content at least fit the screen size, but it may expand if the content becomes bigger.
Gushiken

Answer 4

I've churned on trying to do this strictly with CSS on several occasions (with cross-browser compliance in mind). I find it easier just to write a quick jQuery script which handles resizing the div to the appropriate size.
$(document).ready(function () {
/* this could be something different, like subtracting the height of your footer or something */
$(window).resize(function () { resizeMyDiv(); });
});
function resizeMyDiv() {
$("#divResize").height($(window).height());
}
Not sure if you're using jQuery, but it seems to be easier to do it this way.