how to set height to the main div?

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

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

Answer 2

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 3

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.

Answer 4

Have a look at this question.

Answer 5

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