[转载]div仿框架（B/S结构软件界面）详解[非quirks模式全兼容]

原文源于：http://bbs.blueidea.com/thread-2928157-1-2.html

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

问这样的问题的人很多，我对此有比较深入的研究，但自己从来没有给出过完整的解答与分析，觉得有些对不住蓝色理想的列祖列宗。

先请看demo：

 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仿框架布局</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             /*---ie6---*/
18             html { _padding:70px 10px;}
19             .top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
20             .side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
21             .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
22             .bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
23         </style>
24     </head>
25     <body>
26         <div class="top"></div>
27         <div class="side">
28             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
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         </div>
38         <div class="main">
39             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
40             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
41             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
42             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
43             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
44             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
45             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
46             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
47             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
48         </div>
49         <div class="bottom"></div>
50     </body>
51 </html>

让我们将应该有滚动条的地方的滚动条效果折腾出来：

 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仿框架布局 - 加上滚动条，一个div仿框架的基础概型已经完成</title>
 8         <style type="text/css">
 9             * { margin:0; padding:0; list-style:none;}
10             html,body { height:100%; overflow:hidden; background:#fff;}
11             div { background:#f60; line-height:1.6;}
12             .top { position:absolute; left:10px; top:10px; right:10px; height:50px; overflow:auto;}
13             .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;}
14             .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;}
15             .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px; overflow:auto;}
16         </style>
17     </head>
18     <body>
19         <div class="top"></div>
20         <div class="side">
21             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
22             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
23             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
24             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
25             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
26             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
27             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
28             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
29             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
30         </div>
31         <div class="main">
32             <br /><br /><br />加上滚动条，一个div仿框架的基础概型已经完成
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             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
39             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
40             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
41         </div>
42         <div class="bottom"></div>
43     </body>
44 </html>

以上方法其实早已由wiseinfo在Html+CSS 构建 B/S结构软件界面 — 布局篇 — position方式中进行过介绍，在该文中，ie6亦是分而治之的，它的方法是在html代码顶部加入“<?xml version=”1.0″ encoding=”UTF-8″?>”，使得ie6进入quirks mode（怪异模式）来完成ie6下的div仿框架，但这样做将出现一些影响比较显著的弊端：

1. quirks mode下的ie6连盒模型都变了，就是说你在页面中写任何内容就要慎用padding和border，况且quirks mode下的变化还不止这一点。
2. 如果底部使用绝对定位，则会发生“绝对定位基对象（在此为body）高度为偶数时，出现1px空隙”的bug。

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4     <head>
 5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6         <meta name="author" content="Chomo" />
 7         <link rel="start" href="http://www.14px.com" title="Home" />
 8         <title>div仿框架布局 - 将ie6导入了quirks mode（怪异模式），很有弊端</title>
 9         <style type="text/css">
10             * { margin:0; padding:0; list-style:none;}
11             .div1 { background:#fc0; line-height:1.6; width:400px; height:100px; border:50px solid #f60; padding:20px;}
12             .div2 { background:#f60; line-height:1.6; width:400px; height:100px; position:absolute; bottom:0; left:0;}
13         </style>
14     </head>
15     <body>
16         <div class="div1">该页面请在ie6和非ie6下对比，ie6下连盒模型都变了，就是说你在页面中写任何内容就要慎用padding和border，况且quirks mode下的变化还不止这一点。</div>
17         <div class="div2">
18             如果底部使用绝对定位，则会发生“绝对定位基对象（在此为body）高度为偶数时，出现1px空隙”的bug。<br />
19             您可以试着改变浏览器的大小进行观测。
20         </div>
21     </body>
22 </html>

于是我们需要另辟蹊径。

在很多次失败之后，我终于发现有一个标签可以救ie6于水深火热，那就是最伟大的“<html>”标签，它继承了ie6 quirks mode（怪异模式）下的盒模型状态。

 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仿框架布局 - ie6中，伟大的&lt;html&gt;标签继承了ie6 quirks mode（怪异模式）下的盒模型状态</title>
 8         <style type="text/css">
 9             * { margin:0; padding:0; list-style:none;}
10             html { padding:50px; height:100%; background:#f60; overflow:hidden; background:#fff;}
11             body { height:100%; background:#fc0; overflow:auto; line-height:1.6;}
12         </style>
13     </head>
14     <body>
15         <br /><br /><br />
16         请使用ie6浏览本页面<br />
17         ie6中，伟大的&lt;html&gt;标签继承了ie6 quirks mode（怪异模式）下的盒模型状态<br />
18         这样，我们便有了可乘之机<br />
19         <br /><br /><br /><br /><br /><br /><br /><br />
20         <br /><br /><br /><br /><br /><br /><br /><br />
21         <br /><br /><br /><br /><br /><br /><br /><br />
22         <br /><br /><br /><br /><br /><br /><br /><br />
23         <br /><br /><br /><br /><br /><br /><br /><br />
24         <br /><br /><br /><br /><br /><br /><br /><br />
25         <br /><br /><br /><br /><br /><br /><br /><br />
26     </body>
27 </html>

利用这一点，我们可以在不太轻松的调整之后完成以下效果：

 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仿框架布局 - 先分出三行来</title>
 8         <style type="text/css">
 9             * { margin:0; padding:0; list-style:none;}
10             html { padding:70px 10px; height:100%; background:#fff; overflow:hidden;}
11             body { height:100%; background:#fff; overflow:hidden;}
12             div { background:#f60; line-height:1.6;}
13             .top { height:50px; margin-top:-60px; margin-bottom:10px; position:relative;}
14             .main { height:100%;}
15             .bottom { height:50px; margin-top:10px; position:relative;}
16         </style>
17     </head>
18     <body>
19         <div class="top"></div>
20         <div class="main">先分出三行来（请在ie6下浏览）</div>
21         <div class="bottom"></div>
22     </body>
23 </html>

再用下我们的二列布局知识来完成最终形态，在此我们将艳遇著名的3px bug（不喜欢它可以找点别的办法）：

 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仿框架布局 - 再分出两列</title>
 8         <style type="text/css">
 9             * { margin:0; padding:0; list-style:none;}
10             html { padding:70px 10px; height:100%; background:#fff; overflow:hidden;}
11             body { height:100%; background:#fff; overflow:hidden;}
12             div { background:#f60; line-height:1.6;}
13             .top { height:50px; margin-top:-60px; margin-bottom:10px; position:relative;}
14             .side { height:100%; float:left; width:200px; overflow:auto; position:relative;}
15             .main { height:100%; margin-left:207px; overflow:auto; position:relative;}
16             .bottom { height:50px; margin-top:10px; position:relative;}
17         </style>
18     </head>
19     <body>
20         <div class="top"></div>
21         <div class="side">
22             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
23             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
24             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
25             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
26             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
27             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
28             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
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         </div>
32         <div class="main">
33             <br /><br /><br />再分出两列（还是请在ie6下浏览）
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             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
39             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
40             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
41             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
42         </div>
43         <div class="bottom"></div>
44     </body>
45 </html>

现在我们拥有了ie6的仿框架和非ie6的div仿框架的最终形态，只需要利用hack做个简单的加法则行了：
（当然，同一属性写两遍，后面的属性所对应的值将覆盖前者，这个基础的优先级基础大家还需要温故一下。）
（再“当然”一下——当然，有人对hack深恶痛绝，那么请在使用之前，阅读此文看看是否能消消心头之恨。）

 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仿框架布局 - 让我们荡起双桨</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             /*---ie6---*/
18             html { _padding:70px 10px;}
19             .top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
20             .side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
21             .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
22             .bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
23         </style>
24     </head>
25     <body>
26         <div class="top"></div>
27         <div class="side">
28             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
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         </div>
38         <div class="main">
39             <br /><br /><br />让我们荡起双桨<br />
40             一个兼容性很好的div仿框架的基础概型便完成了<br />
41             <br /><br /><br /><br /><br /><br /><br /><br />
42             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
43             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
44             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
45             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
46             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
47             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
48             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
49             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
50         </div>
51         <div class="bottom"></div>
52     </body>
53 </html>

它很强大而实用，真的：

 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仿框架布局 - 如果您有丰富的想象力，还可以玩些更刺激的</title>
 8         <style type="text/css">
 9             * { margin:0; padding:0; list-style:none;}
10             html,body { height:100%; overflow:hidden; background:#fff;}
11             div { background:#f60; line-height:1.6;}
12             .top { position:absolute; left:10px; top:10px; right:10px; height:50px;}
13             .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;}
14             .main { position:absolute; left:220px; top:100px; bottom:100px; right:10px; overflow:auto;}
15             .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;}
16             .mainTop { position:absolute; height:30px; top:60px; left:220px; right:10px;}
17             .mainBottom { position:absolute; height:30px; bottom:60px; left:220px; right:10px;}
18             /*--- ie6 ---*/
19             html { _padding:100px 10px;}
20             .top { _margin-top:-90px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
21             .side { _height:100%; _padding:30px 0; _margin-top:-30px; _float:left; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
22             .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
23             .bottom { _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
24             .mainTop { _margin-bottom:10px; _margin-left:210px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
25             .mainBottom { _margin-top:10px; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
26         </style>
27     </head>
28     <body>
29         <div class="top"></div>
30         <div class="mainTop"></div>
31         <div class="side">
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             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
39             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
40             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
41         </div>
42         <div class="main">
43             <br /><br /><br />
44             如果您有丰富的想象力，还可以玩些更刺激的。
45             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
46             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
47             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
48             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
49             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
50             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
51             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
52             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
53             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
54         </div>
55         <div class="mainBottom"></div>
56         <div class="bottom"></div>
57     </body>
58 </html>

但在实际应用中主体部分常常是个iframe，加个iframe，IE7则无法适应。T_T

 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</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: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，加个iframe，IE7则无法适应</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>

而且……其实IE7下还不止这一点bug（虽然可以直接overflow-y:scroll，但我于心不忍）。

 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仿框架布局 - 其实IE7下还不止这一点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; font-size:14px;}
16             .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;}
17             /*---ie6---*/
18             html { _padding:70px 10px;}
19             .top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
20             .side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
21             .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
22             .bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;}
23         </style>
24     </head>
25     <body>
26         <div class="top">其实IE7下还不止这一点bug</div>
27         <div class="side">
28             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
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         </div>
38         <div class="main">
39             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
40             <p>现在请换用IE7浏览器测试，缩小窗口直到出现滚动条 恢复后会出现一段无聊的距离 然后再刷新这段距离又消失 事实证明这段无聊的距离与滚动条宽度相等。</p>
41         </div>
42         <div class="bottom"></div>
43     </body>
44 </html>

所幸IE7和IE6的html标签有着相同的盒模型，所以可以直接将IE6 only的部分修改为IE6+IE7 only。

 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仿框架布局 - 所幸IE7和IE6的html标签有着相同的盒模型</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; font-size:14px;}
16             .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;}
17             /*---ie6 / ie7---*/
18             html { *padding:70px 10px;}
19             .top { *height:50px; *margin-top:-60px; *margin-bottom:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
20             .side { *height:100%; *float:left; *width:200px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
21             .main { *height:100%; *margin-left:210px; _margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
22             .bottom { *height:50px; *margin-top:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
23         </style>
24     </head>
25     <body>
26         <div class="top">所幸IE7和IE6的html标签有着相同的盒模型，所以可以直接将IE6 only的部分修改为IE6+IE7 only</div>
27         <div class="side">
28             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
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         </div>
38         <div class="main">
39             <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
40             <p>现在请换用IE7浏览器测试，缩小窗口直到出现滚动条，看，现在没有无聊的距离了吧。它被我们修了。再复述一遍这段文字才够长，不要嫌我罗嗦：现在请换用IE7浏览器测试，缩小窗口直到出现滚动条，看，现在没有无聊的距离了吧。它被我们修了。</p>
41         </div>
42         <div class="bottom"></div>
43     </body>
44 </html>

iframe无法适应高度的bug也一起被修复了，人生真美好。

 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>