我有 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">« 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; }
关于html - 如何使用溢出自动使页眉和页脚之间的 div 高度自动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11116787/