　div仿框架方法详解

更新时间：2022-04-17 14:49:22

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

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

先请看demo：

运行代码框<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>div仿框架布局</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { height:100%; overflow:hidden; background:#fff;} body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} /*---ie6---*/ html { _padding:70px 10px;} .top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} </style> </head> <body> <div class="top"></div> <div class="side"> </div> <div class="main"> </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

大家看到，此时div的实际高宽，完全由left / right / top / bottom这四个属性所掌控着，于是我们便可以借助这个特性，轻松地完成div仿框架的效果了：

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

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>div仿框架布局 - 加上滚动条，一个div仿框架的基础概型已经完成</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html,body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px; overflow:auto;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px; overflow:auto;} </style> </head> <body> <div class="top"></div> <div class="side"> </div> <div class="main"> 加上滚动条，一个div仿框架的基础概型已经完成 </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

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

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

于是我们需要另辟蹊径。

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

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

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

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>div仿框架布局 - 再分出两列</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { padding:70px 10px; height:100%; background:#fff; overflow:hidden;} body { height:100%; background:#fff; overflow:hidden;} div { background:#f60; line-height:1.6;} .top { height:50px; margin-top:-60px; margin-bottom:10px; position:relative;} .side { height:100%; float:left; width:200px; overflow:auto; position:relative;} .main { height:100%; margin-left:207px; overflow:auto; position:relative;} .bottom { height:50px; margin-top:10px; position:relative;} </style> </head> <body> <div class="top"></div> <div class="side"> </div> <div class="main"> 再分出两列（还是请在ie6下浏览） </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>div仿框架布局 - 让我们荡起双桨</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { height:100%; overflow:hidden; background:#fff;} body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} /*---ie6---*/ html { _padding:70px 10px;} .top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} </style> </head> <body> <div class="top"></div> <div class="side"> </div> <div class="main"> 让我们荡起双桨 一个兼容性很好的div仿框架的基础概型便完成了 </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

它很强大而实用，真的：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>div仿框架布局 - 如果您有丰富的想象力，还可以玩些更刺激的</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html,body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:100px; bottom:100px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} .mainTop { position:absolute; height:30px; top:60px; left:220px; right:10px;} .mainBottom { position:absolute; height:30px; bottom:60px; left:220px; right:10px;} /*--- ie6 ---*/ html { _padding:100px 10px;} .top { _margin-top:-90px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .side { _height:100%; _padding:30px 0; _margin-top:-30px; _float:left; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .bottom { _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .mainTop { _margin-bottom:10px; _margin-left:210px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .mainBottom { _margin-top:10px; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} </style> </head> <body> <div class="top"></div> <div class="mainTop"></div> <div class="side"> </div> <div class="main"> 如果您有丰富的想象力，还可以玩些更刺激的。 </div> <div class="mainBottom"></div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>div仿框架布局 - 但在实际应用中主体部分常常是个iframe</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { height:100%; overflow:hidden; background:#fff;} body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} .main iframe { width:100%; height:100%;} /*---ie6---*/ html { _padding:70px 10px;} .top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} </style> </head> <body> <div class="top">但在实际应用中主体部分常常是个iframe，加个iframe，IE7则无法适应</div> <div class="side"> </div> <div class="main"> <iframe frameborder="0" src="http://www.g.cn/"></iframe> </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>div仿框架布局 - 其实IE7下还不止这一点bug</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { height:100%; overflow:hidden; background:#fff;} body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto; font-size:14px;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} /*---ie6---*/ html { _padding:70px 10px;} .top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} </style> </head> <body> <div class="top">其实IE7下还不止这一点bug</div> <div class="side"> </div> <div class="main"> 现在请换用IE7浏览器测试，缩小窗口直到出现滚动条恢复后会出现一段无聊的距离然后再刷新这段距离又消失事实证明这段无聊的距离与滚动条宽度相等。 </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>div仿框架布局 - 所幸IE7和IE6的html标签有着相同的盒模型</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { height:100%; overflow:hidden; background:#fff;} body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto; font-size:14px;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} /*---ie6 / ie7---*/ html { *padding:70px 10px;} .top { *height:50px; *margin-top:-60px; *margin-bottom:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} .side { *height:100%; *float:left; *width:200px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} .main { *height:100%; *margin-left:210px; _margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} .bottom { *height:50px; *margin-top:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} </style> </head> <body> <div class="top">所幸IE7和IE6的html标签有着相同的盒模型，所以可以直接将IE6 only的部分修改为IE6+IE7 only</div> <div class="side"> </div> <div class="main"> 现在请换用IE7浏览器测试，缩小窗口直到出现滚动条，看，现在没有无聊的距离了吧。它被我们修了。再复述一遍这段文字才够长，不要嫌我罗嗦：现在请换用IE7浏览器测试，缩小窗口直到出现滚动条，看，现在没有无聊的距离了吧。它被我们修了。 </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>div仿框架布局 - iframe无法适应高度的bug也一起被修复了</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { height:100%; overflow:hidden; background:#fff;} body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} .main iframe { width:100%; height:100%;} /*---ie6---*/ html { *padding:70px 10px;} .top { *height:50px; *margin-top:-60px; *margin-bottom:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} .side { *height:100%; *float:left; *width:200px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} .main { *height:100%; *margin-left:210px; _margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} .bottom { *height:50px; *margin-top:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} </style> </head> <body> <div class="top">看，亲爱的，iframe无法适应高度的bug也一起被修复了。不过这个修复也可以想想其他的办法：）办法就在本文中，有兴趣的朋友可以自己摸索。</div> <div class="side"> </div> <div class="main"> <iframe frameborder="0" src="http://www.g.cn/"></iframe> </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

谢谢观赏。

经典论坛讨论：
http://bbs.blueidea.com/thread-2928157-1-1.html

上一篇 : ：　Javascript——浅析注册事件下一篇 : 2U机架式南京思科UCS C240 M3售13500

div仿框架方法详解

相关阅读

技术文档最新文章