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

[参与测试的浏览器：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>
提示：您可以先修改部分代码再运行

大家看到，此时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;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} </style> </head> <body> <div class="top"></div> <div class="side"></div> <div class="main">利用overflow:hidden去掉了默认存在的滚动条，再根据上文中介绍的布局特性，一个仿框架的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仿框架布局 - 加上滚动条，一个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（怪异模式）下的盒模型状态。

<!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中，伟大的<html>标签继承了ie6 quirks mode（怪异模式）下的盒模型状态</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { padding:50px; height:100%; background:#f60; overflow:hidden; background:#fff;} body { height:100%; background:#fc0; overflow:auto; line-height:1.6;} </style> </head> <body> 请使用ie6浏览本页面 ie6中，伟大的<html>标签继承了ie6 quirks mode（怪异模式）下的盒模型状态 这样，我们便有了可乘之机 </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 { 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;} .main { height:100%;} .bottom { height:50px; margin-top:10px; position:relative;} </style> </head> <body> <div class="top"></div> <div class="main">先分出三行来（请在ie6下浏览）</div> <div class="bottom"></div> </body> </html>
提示：您可以先修改部分代码再运行

再用下我们的二列布局知识来完成最终形态，在此我们将艳遇著名的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>
提示：您可以先修改部分代码再运行

但在实际应用中主体部分常常是个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: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>
提示：您可以先修改部分代码再运行

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>
提示：您可以先修改部分代码再运行

谢谢观赏。

----------------------09-11-30 补充--------------------------
利用box-sizing实现div仿框架

[ 本帖最后由 14px 于 2009-11-23 11:30 编辑 ]

作者: 14px 发布时间: 2009-05-14

这篇文章终于从你的blog 完善出来见人了~~恭喜恭喜！
不过在hack 部分偶建议用条件注释会比较好！起码不用打一堆奇怪的符号，还比较明朗！

[ 本帖最后由 Elking 于 2009-5-14 23:21 编辑 ]

作者: Elking 发布时间: 2009-05-14

最终用到IFRAME，那不算DIV仿框架了，因为IFRAME就是框架。
应该是使用AJAX将页面动态写入DIV

作者: 鸡毛发布时间: 2009-05-15

鸡毛都来了

lz用到的iframe主要是说明的自适应高度问题，跟框架不框架无关。

作者: goos 发布时间: 2009-05-15

@大家：

谢谢大家的支持。
@goos&蓝色：谢谢前辈鼓励。
@Elking：发在博客的还可以检验修复，发在蓝色的就得谨慎了，得修复好了才敢发。霍霍。hack问题，使用注释虽然美观一点，但，如果采用外部样式表调用，则多增加一个连接数，如果内嵌 ^-^ 不太好吧……
@birdstudio：哈哈，写了有一段时间了，前两天才把iframe和ie7 bug的部分补完。
@鸡毛：文中有纯div版的部分，iframe其实也只是替代了一下div标签。

作者: 14px 发布时间: 2009-05-15

非常不错！多谢分享！
看完之后有个疑问，div类框架是建立起来了，但是链接问题怎么解决啊？
比如点击左边的链接会在右边的div中显示目标页面？

我还很菜，别见笑，还望指教！

作者: singlewolf 发布时间: 2009-05-15

右侧就不用 div，用 iframe 就可以了。楼主已经说得很明白了。

作者: birdstudio 发布时间: 2009-05-15

依然是老问题，如果“头”和“脚”的高度不固定怎么办呢？也就是说中间的高度是自适应的，他的高度应该等于body的高度减去上下两个div的高度（即<div class="top"></div>和<div class="bottom"></div>），那么如果在一个B/S结构的软件系统中，如果每个页面的top和bottom的高度都不一定相同的时候呢？该如何计算中间内容部分的高度？

作者: yeyin 发布时间: 2009-05-16

我明白你的意思，这样的需求是存在的，还在进一步研究中。
这里只是仿制“框架的结构”，这一部分的top和bottom都是固定的。
如果使用frameset，你这个需求同样需要设置高、宽才能完成。

作者: 14px 发布时间: 2009-05-16

我个人认为是不是需要和JS结合了？

作者: yeyin 发布时间: 2009-05-16

先驱光临，迎接来迟...还请多多提点不足之处。

作者: 14px 发布时间: 2009-05-16

楼主做的是不是跟

http://bbs.blueidea.com/viewthread.php?tid=2818595&extra=&page=1

如出一辙？

作者: wuxinxi007 发布时间: 2009-05-17

这篇大名鼎鼎的文章当然已经拜读并学习过了，本文正是在wiseinfo前辈的基础上进行的一些修正。
文中也引用了原文地址，请认真阅读。
而且我已经在标题上明示了：非quirk模式。

[ 本帖最后由 14px 于 2009-5-17 15:16 编辑 ]

作者: 14px 发布时间: 2009-05-17

引用:

原帖由 yeyin 于 2009-5-16 15:42 发表
依然是老问题，如果“头”和“脚”的高度不固定怎么办呢？也就是说中间的高度是自适应的，他的高度应该等于body的高度减去上下两个div的高度（即和），那么如果在一个B/S结构的软件系统中，如果每个页面的top和botto ...

配合JS即可实现! 用JS改变Top和Bottom的height, Center会自动适应的!
http://bbs.blueidea.com/viewthre ... p;page=2#pid3782004
这个实例是用JS改变了Top和Left的显示, 但其原理就是改变了这2项的高或宽的值为0来实现的, 其Center自动适应了改变.
但现在这个实例不好用了, 因为其中使用的JQ库的连接失效了.

引用:

原帖由 14px 于 2009-5-16 16:24 发表

先驱光临，迎接来迟...还请多多提点不足之处。

你太客气了! 大家共勉! 大家共勉! 我之前也曾经想花点时间来解决这其中的问题, 但因时间有限这个问题也没有影响当时的原型开发就不了了之了. 当然最主要的原因还是我非专业人士, 构建HTML+CSS的能力非常有限, 写这篇文章时只是想介绍一种不同的HTML布局方法而没有在代码方面做更深入的研究. 感谢你花时间来研究并完善了这问题, 这也是我那篇帖子中希望得到的共同研究和相互学习!

[ 本帖最后由 wiseinfo 于 2009-5-17 23:31 编辑 ]

作者: wiseinfo 发布时间: 2009-05-17

我跟着楼主的代码做了个top left right bottom各个块之间没间距的 IE7 火狐 opera 都好的就是IE6的left和right总有间距我把.main 的_margin-left:180px;哪怕是120px或再小都不行高手指点下

<!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; *padding:70px 0px 26px;/*---ie6---*/ } body { height:100%; overflow:hidden; background:#fff; } .top { position:absolute; background: #99CCFF; left:0px; top:0px; right:0px; height:70px; *height:70px;/*---ie7---*/ *margin-top:-70px;/*---ie7---*/ *margin-bottom:0px;/*---ie7---*/ *position:relative;/*---ie7---*/ } .side { position:absolute; background:#CCFF66; left:0px; top:70px; bottom:26px; width:200px; overflow:auto; *height:100%;/*---ie7---*/ *float:left;/*---ie7---*/ *width:200px;/*---ie7---*/ *position:relative;/*---ie7---*/ *top:0;/*---ie7---*/ } .main { position:absolute; left:200px; top:70px; bottom:26px; right:0px; background:#3366FF; overflow:auto; *height:100%;/*---ie7---*/ *margin-left:200px;/*---ie7---*/ _margin-left:180px;/*---ie6---*/ *position:relative;/*---ie7---*/ *top:0;/*---ie7---*/ *left:0;/*---ie7---*/ } .bottom { position:absolute; background:#99CCFF; left:0px; bottom:0px; right:0px; height:26px; *height:26px;/*---ie7---*/ *margin-top:0px;/*---ie7---*/ *position:relative;/*---ie7---*/ } .main iframe { width:100%; height:100%; } </style> </head> <body> <div class="top">看，亲爱的，iframe无法适应高度的bug也一起被修复了。不过这个修复也可以想想其他的办法：）办法就在本文中，有兴趣的朋友可以自己摸索。</div> <div class="side"> </div> <div class="main"> </div> <div class="bottom"></div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 jcnet 于 2009-5-31 23:54 编辑 ]

作者: jcnet 发布时间: 2009-05-31

<!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; *padding:70px 0px 26px;/*---ie6---*/ } body { height:100%; overflow:hidden; background:#fff; } .top { position:absolute; background: #99CCFF; left:0px; top:0px; right:0px; height:70px; *height:70px;/*---ie7---*/ *margin-top:-70px;/*---ie7---*/ *margin-bottom:0px;/*---ie7---*/ *position:relative;/*---ie7---*/ } .side { position:absolute; background:#CCFF66; left:0px; top:70px; bottom:26px; width:200px; overflow:auto; *height:100%;/*---ie7---*/ *float:left;/*---ie7---*/ *width:200px;/*---ie7---*/ } .main { position:absolute; left:200px; top:70px; bottom:26px; right:0px; background:#3366FF; overflow:auto; *height:100%;/*---ie7---*/ *margin-left:200px;/*---ie7---*/ *position:relative;/*---ie7---*/ *top:0;/*---ie7---*/ *left:0;/*---ie7---*/ } .bottom { position:absolute; background:#99CCFF; left:0px; bottom:0px; right:0px; height:26px; *height:26px;/*---ie7---*/ *margin-top:0px;/*---ie7---*/ *position:relative;/*---ie7---*/ } .main iframe { width:100%; height:100%; } </style> </head> <body> <div class="top">看，亲爱的，iframe无法适应高度的bug也一起被修复了。不过这个修复也可以想想其他的办法：）办法就在本文中，有兴趣的朋友可以自己摸索。</div> <div class="side"> </div> <div class="main"> </div> <div class="bottom"></div> </body> </html>
提示：您可以先修改部分代码再运行

^-^ 这里其实就只是个二列自适应布局而已，side之下不需要其他内容，于是使用绝对定位就可以了````float才会产生3px bug。

作者: 14px 发布时间: 2009-06-01

收藏那天没仔细看，刚才看了一下

ie6下absolute几乎无法用，不指定宽度就不显示，指定宽度后left和right只接受一个　－－；
ie7下iframe自适应高度那个很奇怪，外层容器要指定高度100%才可以，这个太奇怪了

楼主辛苦了，很有价值的帖，再次感谢！

作者: geminids 发布时间: 2009-06-01

都是高手，我直接ＪＳ控制了，算是偷懒了

作者: HanSolo 发布时间: 2009-06-03

太NB了琢磨了很久也不完善看了晃然大悟

问下能否在left设链接 A1 B1 C1 D1 然后在RIGHT设有锚点的BOX A2 B2 C2 D2 点击A1 B1 C1 D1 右边相应的块自动浮上来

作者: pastako 发布时间: 2009-06-05

看了不少关于这方面的文章，很想知道这种布局方法和通过JavaScript设定自适应布局相比有什么优缺点？？

作者: mycggo 发布时间: 2009-06-12

引用:

原帖由 pastako 于 2009-6-5 18:26 发表
问下能否在left设链接 A1 B1 C1 D1 然后在RIGHT设有锚点的BOX A2 B2 C2 D2 点击A1 B1 C1 D1 右边相应的块自动浮上来

你自己试试不就知道了，呵呵。

作者: birdstudio 发布时间: 2009-06-12

引用:

原帖由 mycggo 于 2009-6-12 15:35 发表
看了不少关于这方面的文章，很想知道这种布局方法和通过JavaScript设定自适应布局相比有什么优缺点？？

两方面吧：
一、JS 越少参与布局越好。减少结构层、表现层、行为层的耦合。

二、JS 可能会有延时加载/加载失败/被禁用的可能性。

作者: birdstudio 发布时间: 2009-06-12

引用:

原帖由 wiseinfo 于 2009-5-17 23:19 发表

配合JS即可实现! 用JS改变Top和Bottom的height, Center会自动适应的!
http://bbs.blueidea.com/viewthre ... p;page=2#pid3782004
这个实例是用JS改变了Top和Left的显示, 但其原理就是改变了这2项的 ...

谢谢赐教，不过我没有找到相关的JS，所以问题依然没有解决，

作者: yeyin 发布时间: 2009-06-17

正好有一个项目用到发现一个问题 main里放入一个宽度100%的表格当出现滚动条时IE6下main内所有内容消失其它浏览器正常把表格属性设为绝对就正常了但因布局需要不能用这个属性

目前解决办法是表格外套一个层设置为_float:left才正常不知道为什么

作者: 109105236 发布时间: 2009-06-24

表格的问题，外层zoom:1也可以。

作者: 14px 发布时间: 2009-06-24

不加外层有办法吗另外我想请教原因是什么是不是IE6在一个绝对定位的层里放一个100%的表格就会出这样的问题

作者: 109105236 发布时间: 2009-06-24

这里的这个层，在ie6下这个部分不是绝对定位的...已经被hack定义为position:static了。
呃，不加外层的话，我目前找不出什么好的解决办法（囧rz）。。。
敬请欣赏这个惊艳的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>无标题文档</title> <style type="text/css"> th, td { border:1px solid #000;} </style> </head> <body> <div style="height:300px; overflow:auto;"> <table style="width:100%; border-collapse:collapse;"> <thead> <tr> <th>字段</th> <th>字段</th> <th>字段</th> <th>字段</th> <th>字段</th> </tr> </thead> <tbody> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> <tr> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> <td>记录</td> </tr> </tbody> </table> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 14px 于 2009-6-25 11:19 编辑 ]

作者: 14px 发布时间: 2009-06-24

<!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=utf8" /> <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:#bbb; line-height:1.6;} table{ border-collapse:collapse; } .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"></div> <div class="side"></div> <div class="main"> <table border="1" width="100%"> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> </table> 缩小浏览器窗口试试 </div> <div class="bottom"></div> </body> </html>
提示：您可以先修改部分代码再运行

在3个浏览器里都不一样 ff正常 ie7没滚动条调整一下窗口尺寸就出来了刷新又没了 ie6缩小到出现滚动条的时候表格就错位或消失

[ 本帖最后由 109105236 于 2009-6-24 15:54 编辑 ]

作者: 109105236 发布时间: 2009-06-24

- -! 说了是表格本身存在的问题啊...
而且你细心地看，firefox也存在问题的（顶边和左边哪里去了），最好在外边套层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仿框架布局</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:#bbb; line-height:1.6;} table{ border-collapse:collapse; } .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"></div> <div class="side"></div> <div class="main"><div style="zoom:1; padding:0.492px 0 0 0.492px;"> <table border="1" width="100%"> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> <tr> <td>main</td><td>main</td><td>main</td><td>main</td><td>main</td><td>main</td> </tr> </table> 缩小浏览器窗口试试 </div></div> <div class="bottom"></div> </body> </html>
提示：您可以先修改部分代码再运行

作者: 14px 发布时间: 2009-06-24

引用:

原帖由 14px 于 2009-6-24 14:48 发表
这里的这个层，在ie6下这个部分不是绝对定位的...已经被hack定义为position:static了。
呃我目前找不出什么好的解决办法（囧rz）。。。

对这个问题有点印象, 但时间过的太久记不起来了. 当初放弃IE6的DOCTYPE转而使用Quirks模式其中一个原因之一也是这个吧! 记得当时做的项目中有大量的数据表格. 因为在MAC下, 手头没有IE6环境, 谁有环境可以测试一下 Quirks模式应该没有这个问题.

作者: wiseinfo 发布时间: 2009-06-25

左侧部分要折叠或者伸缩怎么办

现在很多应用系统要求尽可能的将内容区域可以最大化显示，就会要求左侧部分可以折叠

作者: cindy511 发布时间: 2009-06-25

刚才去试了一把 ^-^ quirks mode没有这样的问题。

自适应的表格部件多套一个层使表格的父对象hasLayout就可以了，这个bug的解决办法确实比较难想到，实属一个特例。

我说“我目前找不出什么好的解决办法”，是因为我楼上的要求不嵌套这个父层。

作者: 14px 发布时间: 2009-06-25

解决方法很多，看你的想象力有多少了。
只要达到隐藏side、最大化main就可以，这些都可以直接获取id的，还怕无法控制吗？
暂且没有通过该方法来实现，但个人觉得这样做更有效率和扩展性：
通过改变html标签的className来改变整体的布局方式。

欢迎讨论 ^-^

作者: 14px 发布时间: 2009-06-25

哈哈，老大亲自点亮标题，先惊艳一下。
这个示例应该好好琢磨一下。

作者: zhuyinhong 发布时间: 2009-06-26

谢谢朱老师捧场，请多指导。

作者: 14px 发布时间: 2009-06-26

这篇文章收藏很久了。一直没时间仔细看。
应该说这篇文章很有应用参考价值。

碰巧手头有opera10 beta2，就顺带测试了，
结果发现一个问题（个人觉得是opera的渲染问题，毕竟也是beta版么）：
如果position:absolute;定位的元素，也使用了width定宽，
当窗口缩放时，它将无法自动适应于缩放后的窗口（刷新正常——想起了ie6下的一个情况）。

如果你有opera10,也可以试试看：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div仿框架布局(opera10测试)</title> <style type="text/css"> *{padding:0;margin:0;} html,body{width:100%;height:100%;overflow:hidden;} .box{position:absolute;top:50px;bottom:50px;width:500px;overflow:auto;border:1px solid #ccc;} </style> </head> <body> <div class="box"> ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc </div> </body> </html>
提示：您可以先修改部分代码再运行

如果你觉得有必要解决，可以试试，多加一个标签来定义宽度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div仿框架布局(opera10测试)</title> <style type="text/css"> *{padding:0;margin:0;} html,body{width:100%;height:100%;overflow:hidden;} .box{position:absolute;top:50px;bottom:50px;overflow:auto;border:1px solid #ccc;} .box .cont{width:500px;} </style> </head> <body> <div class="box"> <div class="cont"> ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc <div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 ONEBOYS 于 2009-8-11 11:25 编辑 ]

作者: ONEBOYS 发布时间: 2009-08-11

原帖由 14px 于 2009-6-24 16:22 发表

一直在关注，从wiseinfo到这里。也曾经用Quirks Mode做过一次东西，现在打算用楼主的方法，可是表格的问题似乎并没有解决啊？
在IE6下，单元格内容稍长，浏览器拖窄后，格式就乱了，急盼楼主解决。

<!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" /> <title>div仿框架布局 - 改变bottom的position，微妙的bug修复了</title> <link rel="start" href="http://www.14px.com" title="Home" /> <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; background:#AAA;} .side { *height:100%; *float:left; *width:200px; *position:relative; *top:0; *right:0; *bottom:0; *left:0; background:#BBB;} .main { *height:100%; *margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0; background:#FBEEBA;} .bottom { *height:50px; *margin-top:10px; *top:auto; *right:auto; *bottom:auto; *left:auto; *width:100%; background:#999;} </style> </head> <body> <div class="top"></div> <div class="side"> </div> <div class="main"> <div style="zoom:1; padding:0.492px 0 0 0.492px;"> <table border="1" style=" width:100%;" > <tr> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> </tr> </table> </div> </div> <div class="bottom">→→→→</div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 seLanceLi 于 2009-9-7 19:33 编辑 ]

作者: seLanceLi 发布时间: 2009-09-07

引用:

原帖由 seLanceLi 于 2009-9-7 17:42 发表
原帖由 14px 于 2009-6-24 16:22 发表

一直在关注，从wiseinfo到这里。也曾经用Quirks Mode做过一次东西，现在打算用楼主的方法，可是表格的问题似乎并没有解 ...

把 style=" white-space:nowrap" 去掉就好了

作者: 109105236 发布时间: 2009-09-08

我的表格要求不换行。况且，列过多的时候和不换行效果一样，这个问题无法回避。

作者: seLanceLi 发布时间: 2009-09-08

引用:

原帖由 seLanceLi 于 2009-9-8 12:21 发表
我的表格要求不换行。况且，列过多的时候和不换行效果一样，这个问题无法回避。

好像里面有固定宽度的容器IE6就不行不单是表格

作者: 109105236 发布时间: 2009-09-08

难道IE6下无解？　当然这个问题我用js也可以控制，只是想如果能用css搞定最好。

作者: seLanceLi 发布时间: 2009-09-08

貌似很多人都遇到过这样的问题，但这个问题不是该仿框架模式下的特性，而是ie浏览器本身的bug，在任何情况下都存在的bug。

我看到在99css中提到了这个bug的名称，在国外称之为：100% ≠ 100% bug，并提出了解决方案：http://www.99css.com/2009/07/ie-6-width-100-bug.html

在这里给大家提供一个简单的解决方法：
在table的外层嵌套一层无意义的div（这也是该方法的弊端所在：有个空标签），并使该层haslayout: on。
大致的结构就是这样的：

复制内容到剪贴板

代码:

[ 本帖最后由 14px 于 2009-9-8 21:03 编辑 ]

作者: 14px 发布时间: 2009-09-08

试了外层还得加上width="100%" 要不又跑了

作者: 109105236 发布时间: 2009-09-09

问题解决了，main这样写就OK了：

<!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" /> <title>14px の布局 - 无BUG </title> <link rel="start" href="http://www.14px.com" title="Home" /> <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-top:71px; *padding-bottom:31px; *padding-left:1px; *padding-right:1px;} .top { *height:70px; *margin-top:-70px; *margin-bottom:1px; *position:relative; *top:0; *right:0; *bottom:0; *left:0; background:#AAA;} .side { *height:100%; *float:left; *width:200px; *position:relative; *top:0; *right:0; *bottom:0; *left:0; background:#BBB;} .main { *height:100%; *margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0; background:#FBEEBA;} .bottom { *height:30px; *margin-top:1px; *top:auto; *right:auto; *bottom:auto; *left:auto; *width:100%; background:#999;} </style> </head> <body> <div class="top"></div> <div class="side"> </div> <div class="main"> <div style="height:100%; width:100%; overflow:auto; "> <div style="zoom:1;"> <table border="1" style="width:100%; background:#EEE;" > <tr> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> <td style=" white-space:nowrap">单元格内容</td> </tr> </table> </div> </div> </div> <div class="bottom"></div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 seLanceLi 于 2009-9-9 10:53 编辑 ]

作者: seLanceLi 发布时间: 2009-09-09

LZ让top side main bottom都position:relative，是不是因为还有别的什么优势，而不单单因为针对IE6的？？？？

LZ你真是太强了

[ 本帖最后由 mycggo 于 2009-9-25 17:16 编辑 ]

作者: mycggo 发布时间: 2009-09-25

引用:

原帖由鸡毛于 2009-5-15 10:48 发表
最终用到IFRAME，那不算DIV仿框架了，因为IFRAME就是框架。
应该是使用AJAX将页面动态写入DIV

恩，不过话说，该用框架的时候还是用框架好，否则折腾呀。。

作者: richie214 发布时间: 2009-09-26

晕，找好久都没解决div{overflow:hidden;}时里面table少一截的问题原来套个div再zoom:1;就可以。。。。。

作者: enjoyd 发布时间: 2009-09-26

position:relative在这里用于在ie6中将position:absolute恢复过来。
理论上用static也可以恢复，但因为其他浏览器的position:absolute使得其内部元素进行绝对定位基点成为了这些设置了position:absolute的元素，为了在这方面保持一致，所以针对ie6采用了relative而非static。

作者: 14px 发布时间: 2009-09-27

LZ
按照你的页面原型测试发现IFRAME在IE8下面会出现双滚动条的问题，最里面的垂直滚动条控制上下，最外边的水平滚动条控制左右，FF3* Safari chrome IE7 IE6都没问题，但就是IE8出现了双层滚动条(XHTML和HTML模式下面都是如此)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>xhtml-test</title> <style type="text/css" media="all"> html,body,div,p{ margin:0; padding:0; border:none; } html{ height:100%; background:#ccc; overflow:hidden; } body{ height:100%; background:#fff; overflow:hidden; } div{ left:1.8; background:#fc9; } .top{ position:absolute; left:20px; right:20px; top:10px; height:60px; } .side{ position:absolute; left:20px; top:80px; bottom:90px; width:200px; overflow:auto; } .main{ position:absolute; left:230px; right:20px; top:80px; bottom:90px; overflow:auto; } .bottom{ position:absolute; left:20px; bottom:20px; right:20px; height:60px; } /*ie6 ie7*/ html{ *padding:90px 20px; } .top{ *position:relative; *margin-top:-70px; *margin-bottom:10px; *top:0; *left:0; *right:0; *bottom:0; *height:60px; } .side{ *position:relative; *height:100%; *float:left; *width:200px; *top:0; *left:0; *right:0; *bottom:0; *overflow:auto; } .main{ *position:relative; *height:100%; *margin-left:210px; *top:0; *left:0; *right:0; *bottom:0; *overflow:auto; } .bottom{ *position:relative; *margin-top:10px; *top:0; *left:0; *right:0; *bottom:0; *height:60px; } </style> </head> <body> <div class="top"><h1>top</h1></div> <div class="side"> side </div> <div class="main"> <iframe frameborder="0" src="http://www.ibm.com/" width="100%" height="100%"></iframe> </div> <div class="bottom">bottom</div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 mycggo 于 2009-9-30 14:45 编辑 ]

作者: mycggo 发布时间: 2009-09-30

iframe { vertical-align:middle;}
或
.main { font-size:0;}
或
iframe { float:left;}

这并不是position:absolute产生的bug，而是ie8在使用iframe时普遍存在的bug，ie6/7也在img上存在类似的bug。

[ 本帖最后由 14px 于 2009-9-30 23:16 编辑 ]

作者: 14px 发布时间: 2009-09-30

引用:

原帖由 14px 于 2009-9-30 23:12 发表
iframe { vertical-align:middle;}
或
.main { font-size:0;}
或
iframe { float:left;}

这并不是position:absolute产生的bug，而是ie8在使用iframe时普遍存在的bug，ie6/7也在img上存在类似的bug。

iframe { float:left;} 这个相对好点

作者: mycggo 发布时间: 2009-10-09

近来根据LZ的例子细化了我做的界面框架测试，发现两个问题。不知道怎么回事，我没有用iframe,table采用<div style="width:100%; height:100%; overflow:auto;"><div style="zoom:1;"><table></table></div></div>

在Opera最新版中当改变窗口时会出现布局错位问题，按住鼠标中键滚动内容时会滚动整个页面到最上方，下面留下一屏空白。发现Opera和FF Safari Chrome最新版对一些东西显示差别不小，感觉Opera很怪异（YAHOO邮件的布局在Opera都错位了）。
在IE8下面，当改变浏览器窗口大小或者滚动main区域时，内部表格中的超链接文字(超链接文字有图片背景)会出现错位现象，比如滞留在main区域的上/下部（当拖动滚动条时错位文字被截断）。

[ 本帖最后由 mycggo 于 2009-10-15 15:29 编辑 ]

作者: mycggo 发布时间: 2009-10-15

op10的问题采用box-sizing来解决，参照本文的ie6方法。
ie8的问题没见过，听得有点云里雾里，请LS发份demo共同研究下吧？

作者: 14px 发布时间: 2009-10-16

引用:

原帖由 14px 于 2009-10-16 01:12 发表
op10的问题采用box-sizing来解决，参照本文的ie6方法。
ie8的问题没见过，听得有点云里雾里，请LS发份demo共同研究下吧？

-------------------------------------------------------------------------------------------------------------------
我已经对表格：<div style="width:100%; height:100%; overflow:auto;"><div style="zoom:1;"><table></table></div></div>了，但在Opera10中还是出现布局错位，奇怪。

IE8那个，我测试很久发现只要<a>有背景图片在IE8里面就会出现这个怪异问题，后来给<a>设置display:block/inline-block;后问题就解决了。

作者: mycggo 发布时间: 2009-10-16

请问这个框架，在左边的链接，如何让其在右边打开呢，那个iframe不能动态指定啊。

作者: dongtso 发布时间: 2009-10-24

OPERA10存在那个问题，还是有点搞不明白。

作者: mycggo 发布时间: 2009-10-29

如果把这样的静态页面交给后台程序员进行开发，加上后台代码之类的，会不会使布局打乱。我认为很有可能。大家认为呢？？？

作者: zxw9184 发布时间: 2009-11-06

这个……详细来讲的话，等几天看有时间写个正式点的文章吧，你先看看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>利用box-sizing实现div仿框架</title> <style type="text/css"> * { margin:0; padding:0;} html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:100px 0; overflow:hidden;} html,body { height:100%;} .top { position:relative; margin-top:-100px; height:100px; background:#f60;} .side { position:relative; height:100%; background:#fc0; overflow:auto; width:200px; float:left; margin-right:0 !important; margin-right:-3px; overflow:auto;} .main { position:relative; overflow:auto; height:100%; background:#f30;} .bottom { position:relative; height:100px; background:#f60; clear:both;} </style> </head> <body> <div class="top" style="z-index:10;"> <div style="position:absolute; width:300px; height:300px; background:#fff; top:50px; left:50px;"></div> </div> <div class="side"> side </div> <div class="main"> main </div> <div class="bottom"> bottom </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 14px 于 2009-11-7 22:09 编辑 ]

作者: 14px 发布时间: 2009-11-07

主区域：
<iframe id="xxx"></iframe>
链接：
<a target="xxx" href="...">...</a>

作者: 14px 发布时间: 2009-11-07

即使有这样的情况也可以继续进行相关调整，要你对原理理解清楚，照搬是没什么意义的，除非是赶工。

作者: 14px 发布时间: 2009-11-07