div仿框架方法详解
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]
问这样的问题的人很多，我对此有比较深入的研究，但自己从来没有给出过完整的解答与分析，觉得有些对不住样式界的列祖列宗。
先请看demo：
提示：你可以先修改部分代码再运行。
通过css的结构大家应该不难看出，这里采用了ie6最基本的hack来区分ie6与其他浏览器来实现这个效果。
那么本教程也将分而述之。
撇开ie6，我们看这个demo：
提示：你可以先修改部分代码再运行。
大家看到，此时div的实际高宽，完全由left / right / top / bottom这四个属性所掌控着，于是我们便可以借助这个特性，轻松地完成div仿框架的效果了：
提示：你可以先修改部分代码再运行。
让我们将应该有滚动条的地方的滚动条效果折腾出来：
提示：你可以先修改部分代码再运行。
以上方法其实早已由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。
提示：你可以先修改部分代码再运行。
于是我们需要另辟蹊径。
在很多次失败之后，我终于发现有一个标签可以救ie6于水深火热，那就是最伟大的“<html>”标签，它继承了ie6 quirks mode（怪异模式）下的盒模型状态。
提示：你可以先修改部分代码再运行。
利用这一点，我们可以在不太轻松的调整之后完成以下效果：
提示：你可以先修改部分代码再运行。
再用下我们的二列布局知识来完成最终形态，在此我们将艳遇著名的3px bug：
提示：你可以先修改部分代码再运行。
现在我们拥有了ie6的仿框架和非ie6的div仿框架的最终形态，只需要利用hack做个简单的加法则行了：
（当然，同一属性写两遍，后面的属性所对应的值将覆盖前者，这个基础的优先级基础大家还需要温故一下。）
（再“当然”一下——当然，有人对hack深恶痛绝，那么请在使用之前，阅读此文看看是否能消消心头之恨。）
提示：你可以先修改部分代码再运行。
它很强大而实用，真的：
提示：你可以先修改部分代码再运行。
以下是09-05-09的补充
但在实际应用中主体部分常常是个iframe，加个iframe，IE7则无法适应。T_T
提示：你可以先修改部分代码再运行。
而且……其实IE7下还不止这一点bug（虽然可以直接overflow-y:scroll，但我于心不忍）。
提示：你可以先修改部分代码再运行。
所幸IE7和IE6的html标签有着相同的盒模型，所以可以直接将IE6 only的部分修改为IE6+IE7 only。
提示：你可以先修改部分代码再运行。
iframe无法适应高度的bug也一起被修复了，人生真美好。
提示：你可以先修改部分代码再运行。
续集完，谢谢观赏。
以下是09-05-24的补充，在KentXD的细心测试下，该方案在ie6下又出现了惊喜：
当bottom部分存在文字的时候，从bottom部分跨越至main部分一直选定，当选定状态仍保持的时候，最大化 / 还原窗口，页面整体向上移动了n个像素，貌似*padding:70px 0;失去了作用。
提示：你可以先修改部分代码再运行。
^-^ 好在改变position的属性为absolute之后，该bug顺利修复：
提示：你可以先修改部分代码再运行。
又一篇续集结束，谢谢Kent。
最新评论