how to make div height auto between the header and the footer with overflow auto

Question

I got 3 div:

1 - <div id="header"> with red color

2 - <div id="main"> with #FFF2D2color

3 - <div id="footer"> with red color

I need the <div id="main"> with auto height and auto overflow. Thx

  <body>
    <div id="header">
      <h1>Well came to abc: Club</h1>
    </div>
    <div id="main">

<a href="index.php">&laquo; Back</a><br />
<br />

<h2>Log File</h2>

<p><a href="logfile.php?clear=true">Clear log file</a><p>

<ul class="log-entries">
</li><li>2012-06-20 10:13:18 | Login: aa logged in.
</li><li>2012-06-20 10:19:56 | Login:  logout.
</li><li>2012-06-20 10:22:14 | Login:  logged in.
</li><li>2012-06-20 10:22:16 | Login:  logout
</li><li>2012-06-20 10:26:58 | Login: dgf logged in.
</li><li>2012-06-20 10:26:59 | Login: 35 logout
</li><li>2012-06-20 10:28:03 | Login: aa logged in.
</li><li>2012-06-20 10:28:05 | Login:  logout
</li><li>2012-06-20 10:32:53 | Login: aa logged in.
</li><li>2012-06-20 10:32:55 | Login:  logout
</li><li>2012-06-20 10:35:54 | Login: aa logged in.
</li><li>2012-06-20 10:35:56 | Login: aa logout
</li><li>2012-06-20 10:36:58 | Login: rye logged in.
</li></li><li>2012-06-20 10:13:18 | Login: aa logged in.
</li><li>2012-06-20 10:19:56 | Login:  logout.
</li><li>2012-06-20 10:22:14 | Login:  logged in.
</li><li>2012-06-20 10:22:16 | Login:  logout
</li><li>2012-06-20 10:26:58 | Login: dgf logged in.
</li><li>2012-06-20 10:26:59 | Login: 35 logout
</li><li>2012-06-20 10:28:03 | Login: aa logged in.
</li><li>2012-06-20 10:28:05 | Login:  logout
</li><li>2012-06-20 10:32:53 | Login: aa logged in.
</li><li>2012-06-20 10:32:55 | Login:  logout
</li><li>2012-06-20 10:35:54 | Login: aa logged in.
</li><li>2012-06-20 10:35:56 | Login: aa logout
</li><li>2012-06-20 10:36:58 | Login: rye logged in.
</li>
    <li>2012-06-20 10:37:02 | Login: rye logout
</li><li>2012-06-20 10:39:03 | Login: aa logged in.
</li><li>2012-06-20 10:39:07 | Login: aa logout
</li><li>2012-06-20 10:44:49 | Login: aa logged in.
</li><li>2012-06-20 10:45:00 | Login: aa logout
</li><li>2012-06-20 10:46:10 | Login: aa logged in.
</li><li>2012-06-20 10:46:11 | Login: aa logout
</li><li>2012-06-20 10:53:45 | Login: aa logged in.
</li><li>2012-06-20 11:10:04 | Login: aa logout
</li><li>2012-06-20 11:10:18 | Login: aa logged in.
</li><li>2012-06-20 11:13:16 | Login: aa logged in.
</li><li>2012-06-20 11:48:51 | Login: aa logout
</li><li>2012-06-20 11:49:16 | Login: aa logged in.
</li><li>2012-06-20 11:49:48 | Login: aa logout
</li><li>2012-06-20 11:52:31 | Login: aa logged in.
</li><li>2012-06-20 11:56:13 | Login: aa logout
</li><li>2012-06-20 11:56:26 | Login: aa logged in.
</li><li>2012-06-20 11:56:36 | Login: aa logout
</li><li>2012-06-20 11:57:07 | Login: aa logged in.
</li></ul>
    </div>
    <div id="footer">Copyright 2012, centerwow</div>
  </body>

css code:

html { height: 800px; width: 100%;overflow: hidden; }
body { height: 100%; width: 100%; margin: 0; padding: 0; border: 0; background: #FFFFFF;
  font: 13px/15px Verdana,Arial,Helvetica,sans-serif; }
img { border: none; }

#header { height: 95px; text-align: center; background: red; color: #D4E6F4; }
#header h1 {float:left; padding: 1px;height: 69px; margin: 1px;;width: 100%;clear: both;background: green;}

/* Note: IE 5 & 6 won't understand min-height */

#main { max-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/

    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
    width: 300Px;
    background:#FFF2D2;
    margin:1px;
    overflow:auto;}

#footer { width:100%; height: 2em; padding: 1em; text-align: center; 
  background: red;  color: #D4E6F4;position: absolute;bottom:0; }

Answer 1

You could always "cheat" a bit, and use position absolute on your 3 main divs: http://jsfiddle.net/c6ABa/71/

#header { position: absolute; top: 0; height: 95px; }
#main { position: absolute: top: 95px; bottom: 40px; }
#footer { position: absolute; bottom: 0; height: 40px; }

Answer 2

Try this:

JS:

$(document).ready(function() {
    $('#main').height($(window).height() - 150);

    $(window).resize(function(){
        $('#main').height($(window).height() - 150);
    });
});

It will auto resize #main during a window resize.

EDIT: And here is your updated fiddle: http://jsfiddle.net/c6ABa/53/

Answer 3

Well i have the working version for you, I have used Jquery to achive this, below is the code and fiddle link..

 $(document).ready(function(){
    var windowHeight = $(window).height();
    var mainBlockHeight = windowHeight - $('#footer').height() - $('#header').height() - 28;
    $('#main').height(mainBlockHeight);

});

Here is the fiddle, http://jsfiddle.net/meetsubhajit/c6ABa/73/

EDIT: Here i have fetch the height of footer and header dynamically as later if height of header and footer increases or decreases you won't need to edit the script again.

how to make div height auto between the header and the footer with overflow auto

Question

3 answers

solution1
2 2012-06-20 10:25:55

solution2
1 2012-06-20 10:15:47

solution3
1 2012-06-20 10:28:12

how to make div height auto between the header and the footer with overflow auto

Question

3 answers

solution1 2 2012-06-20 10:25:55

solution2 1 2012-06-20 10:15:47

solution3 1 2012-06-20 10:28:12

solution1
2 2012-06-20 10:25:55

solution2
1 2012-06-20 10:15:47

solution3
1 2012-06-20 10:28:12