如何使用溢出自动使页眉和页脚之间的 div 高度自动

jsfiddle Demo

我得到了 3 个div：

1 - 红色<div id="header">

2 - 带 #FFF2D2color 的<div id="main">

3 - 红色<div id="footer">

我需要具有自动高度和自动溢出功能的<div id="main">。感谢

  <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代码：

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

你总是可以"作弊"一点，并在你的 3 个主要div 上使用绝对位置： 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; }

试试这个：

.JS：

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

它将在窗口调整大小期间自动调整#main大小。

编辑：这是您更新的小提琴：http://jsfiddle.net/c6ABa/53/

好吧，我有适合您的工作版本，我已经使用 Jquery 来实现了这一点，下面是代码和小提琴链接。

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

这是小提琴，http://jsfiddle.net/meetsubhajit/c6ABa/73/

编辑：在这里，我已经动态获取页脚和页眉的高度，

因为稍后如果页眉和页脚的高度增加或减少，则无需再次编辑脚本。

相关内容

最新更新

热门标签：