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>

Have a look at [this question](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page). — Çağdaş Tekin, Apr 09 '09 at 12:36

score 0 · Answer 1 · answered Apr 09 '09 at 12:00

0

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

answered Apr 09 '09 at 12:00

mishac

3,288
1
21
19

if position is giving to the footer its width is increasing. – Shiva Srikanth Thummidi Apr 09 '09 at 12:03
you can set "width:200px;margin: 0 auto" as well to keep its width. – mishac Apr 09 '09 at 12:06

score 0 · Answer 2 · answered Apr 09 '09 at 12:27

0

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

answered Apr 09 '09 at 12:27

SvenFinke

1,254
3
15
30

why did i recieve a votedown? had anyone problems with my solution? would really like to know because it worked fine when i tested it – SvenFinke Apr 09 '09 at 12:41
its not working! u code is missing some body CSS like this body{ height:100%,margin:0px;padding:0px;} – Shiva Srikanth Thummidi Apr 10 '09 at 04:39

score 0 · Answer 3 · answered Apr 09 '09 at 12:34

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.

ya Mr Brandon Montgomery its right, But i am trying to make it using CSS. If i did't get it,I will use Jquery. thanks — Shiva Srikanth Thummidi, Apr 09 '09 at 12:42

score 0 · Accepted Answer · answered Apr 09 '09 at 15:57

0

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

answered Apr 09 '09 at 15:57

wheresrhys

22,558
19
94
162

how to set height to the main div?

4 Answers4