十四像素

利用box-sizing实现div仿框架

11月 21st, 2009

29 comments

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[操作系统：Windows]

先看代码：

提示：你可以先修改部分代码再运行。

原理大概就是这样的：

千言万语抵不过一副画，通过整容前后的对比，大家应该能看出box-sizing:border-box的作用了。

了解box-sizing的同学们应该知道，它来自离微国比较遥远的css3世界，因此IE6/IE7是不支持的，但我很负责任滴说：本demo正常兼容IE6/IE7。

因为……

IE6/IE7下，<html>的box-sizing默认值本就是border-box（注：IE7有一点点不正常，overflow:hidden后神志有所恢复，将不影响本demo正常运作）。

现在的问题就是是不是要采用这个方法了，给点优劣的对比，大家自行斟酌吧：

比较使用绝对定位的方法来实现，这个方法在目前主要存在两个优势：

针对每种浏览器基本使用的同一方法，css代码简单，易修改、易理解。
兼容。绝对定位的方法在OP10下存在暂时找不着修复bug的办法，只好绕个弯走了。

它最大的劣势就是欠灵活，如果没有IE6，我想我是坚决选择绝对定位的方法的。

以下为应用实例demo。

提示：你可以先修改部分代码再运行。

一个应注意的问题：

不要给body以overflow:hidden，它将会无情地隐藏掉任何在它以外的任何东西，包括top/bottom（header/footer）；

一个应理解的要点：

[100%+(N)px] 的高度产生的方法：div { height:100%; padding-top:(N)px;}。

Chomo xhtml+css css3, frame, xhtml+css

div仿框架方法详解

4月 23rd, 2009

9 comments

[参与测试的浏览器：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>

提示：你可以先修改部分代码再运行。

通过css的结构大家应该不难看出，这里采用了ie6最基本的hack来区分ie6与其他浏览器来实现这个效果。

那么本教程也将分而述之。

撇开ie6，我们看这个demo：

提示：你可以先修改部分代码再运行。

大家看到，此时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>

提示：你可以先修改部分代码再运行。

以上方法其实早已由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。

<?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>

提示：你可以先修改部分代码再运行。

于是我们需要另辟蹊径。

在很多次失败之后，我终于发现有一个标签可以救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>

提示：你可以先修改部分代码再运行。

现在我们拥有了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>

提示：你可以先修改部分代码再运行。

它很强大而实用，真的：

<!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>

提示：你可以先修改部分代码再运行。

以下是09-05-09的补充

但在实际应用中主体部分常常是个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>

提示：你可以先修改部分代码再运行。

而且……其实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>

提示：你可以先修改部分代码再运行。

所幸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: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>

提示：你可以先修改部分代码再运行。

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: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>

提示：你可以先修改部分代码再运行。

续集完，谢谢观赏。

以下是09-05-24的补充，在KentXD的细心测试下，该方案在ie6下又出现了惊喜：

当bottom部分存在文字的时候，从bottom部分跨越至main部分一直选定，当选定状态仍保持的时候，最大化 / 还原窗口，页面整体向上移动了n个像素，貌似*padding:70px 0;失去了作用。

<!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仿框架布局 - 这个微妙的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;} /*---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: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">请在IE6下测试这个很微妙的bug</div> <div class="side"> </div> <div class="main"> 一 直 选 到 这 里 来 ↑ 保持选定状态，然后最大化 / 还原窗口 </div> <div class="bottom">→从这里开始选定文字（选到上面了这里可能选定区域消失，没有关系的，bug将如期而至）</div> </body> </html>

提示：你可以先修改部分代码再运行。

^-^ 好在改变position的属性为absolute之后，该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仿框架布局 - 改变bottom的position，微妙的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;} /*---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:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} .bottom { *height:50px; *margin-top:10px; *top:auto; *right:auto; *bottom:auto; *left:auto; *width:100%;} </style> </head> <body> <div class="top"></div> <div class="side"> </div> <div class="main"> 将bottom的position值变为absolute能解决这个bug。 当然，top / right / bottom / left的值也要好好设置为auto了，width:100%也记得设置一下。 </div> <div class="bottom">→→→→</div> </body> </html>

提示：你可以先修改部分代码再运行。

又一篇续集结束，谢谢Kent。

Chomo xhtml+css frame, position, xhtml+css

Archive

利用box-sizing实现div仿框架

div仿框架方法详解

分类

最新文章

最新评论

充电器

关注web标准化的朋友

身边