上一篇
下一篇
姗姗来迟的div仿框架布局
作者:飘零雾雨 日期:2009-10-20
转载请注明出处，css探索之旅-飘零雾雨的庄园
记得早在07年的时候就写过一篇关于用div代替frameset，使用css来模仿框架布局的文章“DIV布局之头尾固定中间自适应”。
不过在那篇文章中尚有一个未解决的遗憾问题，那就是为了兼容ie6，需使用Quirks Mode模式，虽说效果可以达到，但多少还是让人耿耿于怀，非得fix不可。在写完那篇文章过了很长时间后，估计在08年左右，偶然发现一个可以解决该问题的方法。于是就对之前的demo进行改造，优化。
其实实际应用的地方不会很多，所以就没有发出来，一直处于Private状态 ^_^ 这段时间公司有个项目需要用到这个框架，被同事问起，就发了link给到。索性写篇文章，公布link，当是更新blog了，于是有了今天这篇“姗姗来迟的div仿框架布局”。该版本不再兼容IE低版本，如IE5.5及以下，兼容IE6,7,8; Firefox; Chrome; Safari; Opera浏览器，没被列入的浏览器未测试。
主要有几个需要注意的地方是：
- 如何去掉Quirks Mode：善加利用html标记
- 两栏布局时需考虑内容栏里的内容灰常长的情况，如：超过内容栏本身宽度
对于想看具体实现代码的朋友，就请自己去打开实例，另存到本地。这里我就不贴出来了，免得又臭又长，影响文章版面的美观 ^_^
Version2.0进化细节：
回顾Version1.0进化细节：
文章来自: 
引用通告: 
Tags: 评论: 13 | 引用: 0 | 查看次数: 2011
回复
ForceMTA[2010-08-15 04:02 AM | 
]用绝对位置布局DIV虽然也可以解决问题,不过在IE下面拉大缩小窗口时会一跳一闪的效果很不好.一般我都不这么做,左右分栏我比较倾向于DIV流水布局,上下分栏我倾向于用js处理,这样处理的效果是最好的,您可以参考一个QQ邮箱是怎么处理布局的.
真是救命良方呀，呵呵 
希望老大写一个中的可栏可以伸缩的,类似于MSDN的页面那种效果的
@boyitech
你只要看“布局级别”的代码就行，内容级别的代码可以忽略不必看。
你只要看“布局级别”的代码就行，内容级别的代码可以忽略不必看。
Version2.0的两栏布局不需要那么多层，四层也行
@玄冰
呵呵，看样子这样的仿框架布局还是有一定的应用空间的 ^_^
呵呵，看样子这样的仿框架布局还是有一定的应用空间的 ^_^
很好 很强大 解决了我一些问题，非常感谢
如果单击左侧的链接在右边显示
飘零雾雨 于 2010-03-04 06:08 PM 回复
飘零雾雨 于 2010-03-04 06:08 PM 回复加段简单的js就可以了
是为什么不能在 定义项 里使用块级元素？
请教下：为什么不能在定义列表里使用块级元素？
飘零雾雨 于 2010-03-04 06:07 PM 回复
飘零雾雨 于 2010-03-04 06:07 PM 回复dt不能包含有块级元素，dd可以
发表评论
