CODEWITHSUNDEEP
htmlcss
yossi
yossi

Reputation: 296

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

jsfiddle Demo

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; }


​

Upvotes: 0

Views: 123

Answers (3)

Subhajit
Subhajit

Reputation: 1987

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.

Upvotes: 1

peirix
peirix

Reputation: 37751

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; }

Upvotes: 2

Dexter Huinda
Dexter Huinda

Reputation: 1222

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/

Upvotes: 1

Related Questions