0

jsfiddle 演示

我有 3 个 div：

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

2 -<div id="main">使用#FFF2D2color

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


​
4

3 回答 3

2

您总是可以“欺骗”一点，并在您的 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; }
于 2012-06-20T10:25:55.360 回答
1

好吧，我有适合你的工作版本，我使用 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/

编辑：在这里我已经动态地获取页脚和页眉的高度，如果页眉和页脚的高度增加或减少，您将不需要再次编辑脚本。

于 2012-06-20T10:28:12.253 回答
1

尝试这个：

JS：

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

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

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

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

于 2012-06-20T10:15:47.530 回答