基本上来说，由于IE6的存在，用xhtml+css来模拟frameset是很困难的事情，处理的手段我已知的仅以下几点：
1. 将IE6转人Quirks mode，其他浏览器采用position:absolute定位。
2. 利用IE6的html标签的盒模型解释与其他标签不一致，来实现这个（100%-n像素）的高度，其他浏览器采用position:absolute定位。
3. 固定头尾，中间采用“padding”限定顶部距离和底部距离，非常憋脚但无hack的方法
1、优化主要目的：解决IE6中采用quirks模式存在弊端的模式。
优化主要方法：利用IE6中<html>标签的盒模型bug添置top与bottom的空白区域。
优化后的演示：
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <meta name="author" content="Chomo" />
6 <link rel="start" href="http://www.14px.com" title="Home" />
7 <title>div仿框架布局 - iframe无法适应高度的bug也一起被修复了</title>
8 <style type="text/css">
9 * { margin:0; padding:0; list-style:none;}
10 html { height:100%; overflow:hidden; background:#fff;}
11 body { height:100%; overflow:hidden; background:#fff;}
12 div { background:#f60; line-height:1.6;}
13 .top { position:absolute; left:10px; top:10px; right:10px; height:50px;}
14 .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;}
15 .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;}
16 .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;}
17 .main iframe { width:100%; height:100%;}
18 /*---ie6---*/
19 html { *padding:70px 10px;}
20 .top { *height:50px; *margin-top:-60px; *margin-bottom:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
21 .side { *height:100%; *float:left; *width:200px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
22 .main { *height:100%; *margin-left:210px; _margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
23 .bottom { *height:50px; *margin-top:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
24 </style>
25 </head>
26 <body>
27 <div class="top">看，亲爱的，iframe无法适应高度的bug也一起被修复了。不过这个修复也可以想想其他的办法：）办法就在本文中，有兴趣的朋友可以自己摸索。</div>
28 <div class="side">
29 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
30 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
31 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
32 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
33 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
34 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
35 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
36 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
37 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
38 </div>
39 <div class="main">
40 <iframe frameborder="0" src="http://www.g.cn/"></iframe>
41 </div>
42 <div class="bottom"></div>
43 </body>
44 </html>
2、IE存在通病，直接父体未设置高度，则子对象height:100%失效。
但IE7对position:absolute;的解释已经修复了，so，你可以：加句：
position:absolute; left:0; top:0; right:0; bottom:0;
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title></title>
6 <style type="text/css">
7 *{ margin:0; padding:0;}
8 html{ padding:0; _padding:100px 0; width:100%; height:100%; overflow:hidden; font-size:12px; font-family:"宋体";}
9 body{ padding:100px 0; _padding:0; height:100%; overflow: hidden;}
10 .l_top { position:absolute; top:0; width:100%; height:100px; background:#75bfde; line-height:100px; text-align:center;}
11 .l_body { position: absolute; _position: relative; top:100px; _top:0; bottom:100px; width:100%; height:auto; _height:100%; background:#ffc; text-align:center;}
12 .l_bottom { position:absolute; bottom:0; width:100%; height:100px; background:#d1edf8; line-height:100px; text-align:center;}
13 .l_main { padding-left:200px; height:100%; float:left;}
14 .l_content { position:absolute; _position:relative; width:auto; left:200px; top:0; bottom:0; _left:0; right:0; height:auto; _height:100%; overflow:auto; background:#93d2ec;}
15 .l_side { position:absolute; _position:relative; width:200px; left:0; top:0; bottom:0; _left:0; height:auto; _height:100%; _margin-left:-100%; _float:left; overflow:auto; background:#93d2ec; }
16 </style>
17 </head>
18 <body>
19 <div class="l_top">顶部</div>
20 <div class="l_body">
21 <div class="l_main">
22 <div class="l_content"><iframe id="carnoc" src="http://www.g.cn" scrolling="yes" frameborder="0" style="100%;height:100%;position:absolute; left:0; top:0; right:0; bottom:0;"></iframe></div>
23 </div>
24 <div class="l_side"> 无<br />
25 标<br />
26 题<br />
27 文<br />
28 档<br />
29 无<br />
30 标<br />
31 题<br />
32 文<br />
33 档<br />
34 无<br />
35 标<br />
36 题<br />
37 文<br />
38 档<br />
39 无<br />
40 </div>
41 </div>
42 <div class="l_bottom">底部</div>
43 </body>
44 </html>
3、
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <style>
8 * { margin:0; padding:0; font-size:12px; list-style:none;}
9 html,body { height:100%; background:#fff; overflow:hidden;}
10 body { position:relative;}
11 .top { position:absolute; top:0; height:20px; width:100%; background:#f60; right:17px;}
12 .bottom { position:absolute; bottom:0; height:20px; right:17px; width:100%; background:#f60;}
13 .topContent,
14 .bottomContent { padding-left:17px; height:20px;}
15 .body { height:100%; overflow:scroll; overflow-x:hidden;}
16 .bodyContent { margin:20px 0;}
17 </style>
18 <body>
19 <div class="top">
20 <div class="topContent">顶部</div>
21 </div>
22 <div class="body">
23 <div class="bodyContent">
24 主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
25 主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
26 主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
27 主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
28 主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
29 主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
30 主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
31 主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
32 主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
33 主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />主体<br />
34 </div>
35 </div>
36 <div class="bottom">
37 <div class="bottomContent">底部</div>
38 </div>
39 </body>
40 </html>