利用box-sizing实现div仿框架
11月 21st, 2009
[参与测试的浏览器：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;}。
前几天在蓝色看到你的BLOG,太好了,太多实用的东西了,这几天天天看你是,就是更新太慢,希望大哥能多写点
很少搞这个属性，用处还不大
@开辟者
呃，就算有那么多时间，也木有那么多东西可以写啦。
榜样！
帅哥，Google喊你回来更新博客…
@Chomo
你对B/S情有独钟哦~
没有留言板啊，就在这里说2句。
这里都是我想知道的东东，非常感谢。
这篇文章中的方法非常理想，但是如果在中间iframe中有个链接是CLICK ME，点击这个链接的话 在IE7中这个iframe就会置顶，虽然我认为这个link是不应该存在的，不幸–确实有人这么干了。
demo：http://dl.dropbox.com/u/335315/outlink/14px/box-sizing/Untitled-3.html
最近和浏览器bug有缘
e.g.
1.IE7中，鼠标从显示的下拉菜单中直接移动到下层的iframe中，li:hover状态无法自动解除（但是li的mouseout事件没有影响）。
2.IE6中iframe重影现象
http://dl.dropbox.com/u/335315/outlink/temp/Untitled-2.html
3.FF中的幽灵参数
http://dl.dropbox.com/u/335315/outlink/IE-ff.html
4.IE6中height100%的叛变
http://dl.dropbox.com/u/335315/outlink/ie6height100.html
上文中有个CLICK ME的链接
代码是 《a onclick=”return true” href=”#”》《/a》
麻烦问下，side部分的样式：margin-right:0 !important; margin-right:-3px; overflow:auto;
是做什么用的，我去掉了貌似对布局没有什么影响，不知有什么特殊的作用。谢谢博主
修复ie6的3px bug的问题，overflow:auto是加滚动条（内容超过高度时显示）。
你的样式代码对我帮助不小
哈！ 大哥, 圣诞快乐~
^-^，Eric圣诞快乐`~“
兄弟 你这个框架有内存问题 ， 不断的打开新窗口 内存占用始终涨 只有关闭浏览器以后内存才会掉下来 ？
@www.mdjrcw.com
愿闻其详……
呃，貌似这里木有不断滴打开新窗口啦。
box-sizing挺好, 让我有手段去统一盒模型的解析!
好强悍的博文
好强悍的博客
好强悍的博主
呵呵。学习了~~加油~
博主说欠灵活是指哪方面啊？ 我用在项目里感觉挺好的。
你好，我用你这个框架在IE下有这么一个问题，我在iframe里引用一个页面，里面有个按钮，每次点击整个页面的头部都会上移一点，不知道是什么原因？
IE下
@stanford
IE6
你好，我定位到问题啦，不知道能不能解决，就是在你的框架右侧的iframe里引用页面中如果存在a标签中是这样的button就会出现点击头部就没有了
a href=”#” onclick=”alert(’a');”
@stanford
您好，经测试确实存在这样的问题，所以空链接请使用：
a href=”javascript:void(0)” onclick=”alert(’a');”
@Chomo
这个问题能不能通过CSS解决呢，现在IFRAME里面引用的页面不能要求全去改已有的A标签。希望博主可以通过CSC解决
用expression应该可以的吧，不过很耗性能的说。
项目中不会把a那样写的呢，会造成屏幕回跳到页头的，这href的值本身就是有问题的。
@popeye
大哥实在抱歉，突然发现某些文章还需要审核的 - -! 半年后的今天才发现，估计是因为里面的链接太多了。
现在dropbox都打不开了，这年头……悲剧啊……
BZ，您好，请问您的代码运行和复制功能是wp插件还是，自己直接写的？
@Audio
您好，是CoolCode插件和RunCode插件。