CSDN-CSDN社区-Web 开发-HTML(CSS)

收藏 [推荐] [散分]姗姗来迟的div仿框架布局[问题点数:300]

  • storm0
  • (飘零雾雨(css探索之旅))
  • 等 级:
  • 结帖率:
楼主发表于:2009-11-26 14:25:27
  转载请注明出处,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浏览器,没被列入的浏览器未测试。

  主要有几个需要注意的地方是:

  1.如何去掉Quirks Mode:善加利用html标记

  2.两栏布局时需考虑内容栏里的内容灰常长的情况,如:超过内容栏本身宽度

  对于想看具体实现代码的朋友,就请自己去打开实例,另存到本地。这里我就不贴出来了,免得又臭又长,影响文章版面的美观 ^_^

  Version2.0进化细节:

  div仿框架布局之典型的通栏布局V2
  div仿框架布局之典型的两栏布局V2
  div仿框架布局之典型的两栏布局进化V2

  回顾Version1.0进化细节:

  div仿框架布局之典型的通栏布局V1
  div仿框架布局之典型的两栏布局V1
  div仿框架布局之典型的两栏布局进化V1
回复次数:262
#1楼 得分:0回复于:2009-11-26 14:46:11
ding
#2楼 得分:0回复于:2009-11-26 14:47:43
bd再看
#3楼 得分:0回复于:2009-11-26 14:50:06
pretty good.
  • bo523用户头像
  • bo523
  • (菠菜)
  • 等 级:
#4楼 得分:0回复于:2009-11-26 14:53:30
顶  学习了!!!
#5楼 得分:0回复于:2009-11-26 15:14:19
学习
#6楼 得分:0回复于:2009-11-26 15:14:32
#7楼 得分:0回复于:2009-11-26 16:05:37
学习,
不知道div能否像框架那样可以拉动边框
#8楼 得分:0回复于:2009-11-26 16:08:03
学习
  • cs5276用户头像
  • cs5276
  • (cssnweb.com)
  • 等 级:
#9楼 得分:0回复于:2009-11-26 16:27:49
好东西~顶着!
  • yan11cn用户头像
  • yan11cn
  • (♫小白♪加油♫接分生娃开宝马!)
  • 等 级:
  • 2

#10楼 得分:0回复于:2009-11-26 16:30:00
#11楼 得分:0回复于:2009-11-26 16:32:55
UP
  • ws_hgo用户头像
  • ws_hgo
  • (蓝天白云--(全面提升!!))
  • 等 级:
#12楼 得分:0回复于:2009-11-26 16:33:03
这个必须顶
#13楼 得分:0回复于:2009-11-26 16:37:21
这个必须顶
#14楼 得分:0回复于:2009-11-26 16:39:07
jf
#15楼 得分:0回复于:2009-11-26 16:40:40
谢谢了,学习,不过我很菜,能说说这样用的好处吗?何时需要这样用。
#16楼 得分:0回复于:2009-11-26 16:46:32
jf 并学习
#17楼 得分:0回复于:2009-11-26 16:47:34
多谢楼主
#18楼 得分:0回复于:2009-11-26 16:48:06
学习
#19楼 得分:0回复于:2009-11-26 16:49:01
看看学习,楼主辛苦了
  • ileson用户头像
  • ileson
  • (代码民工)
  • 等 级:
#20楼 得分:0回复于:2009-11-26 16:49:37
半年前要找的东西。。现在终于找到了。。
mark一下。
此贴必火。
#21楼 得分:0回复于:2009-11-26 16:54:33
顶下
  • ileson用户头像
  • ileson
  • (代码民工)
  • 等 级:
#22楼 得分:0回复于:2009-11-26 16:56:46
弱弱的问一下:
怎么实现左点右出?
#23楼 得分:0回复于:2009-11-26 16:57:34
接分来了。
#24楼 得分:0回复于:2009-11-26 16:58:17
工页
#25楼 得分:0回复于:2009-11-26 16:58:46
支持原创,

还有,

抢分啊。。。。呵呵
#26楼 得分:0回复于:2009-11-26 17:07:09
顶、学习、抢分
#27楼 得分:0回复于:2009-11-26 17:11:18
jf,学习
#28楼 得分:0回复于:2009-11-26 17:15:09
终于修正鸟,表忘了还有一个利用锚点实现的TabStrip你也给优化一下,等着用涅~~`````  ^_^
#29楼 得分:0回复于:2009-11-26 17:17:50
接分!
#30楼 得分:0回复于:2009-11-26 17:22:53
学习
  • wuhuwy用户头像
  • wuhuwy
  • (勇者无畏)
  • 等 级:
#31楼 得分:0回复于:2009-11-26 17:26:28
学习,帮顶,接分!
#32楼 得分:0回复于:2009-11-26 17:35:38
顶,学习,顺便接分。
#33楼 得分:0回复于:2009-11-26 17:37:01
引用 31 楼 wuhuwy 的回复: 学习,帮顶,接分!

顶!!!!!!
#34楼 得分:0回复于:2009-11-26 17:43:36
很好
#35楼 得分:0回复于:2009-11-26 17:47:58
~jF
  • guojh021用户头像
  • guojh021
  • (赚钱买枪抢银行)
  • 等 级:
#36楼 得分:0回复于:2009-11-26 17:58:35
学习.
#37楼 得分:0回复于:2009-11-26 17:59:07
mark
#38楼 得分:0回复于:2009-11-26 18:26:10
学习学习
#39楼 得分:0回复于:2009-11-26 18:38:12
每天回帖即可获得10分可用分!小技巧:教您如何更快获得可用分 
#40楼 得分:0回复于:2009-11-26 18:45:51
我喜欢这个。
  • sdfkfkd用户头像
  • sdfkfkd
  • (特别(男))
  • 等 级:
#41楼 得分:0回复于:2009-11-26 18:47:31
留个记号
#42楼 得分:0回复于:2009-11-26 18:49:50
ding
#43楼 得分:0回复于:2009-11-26 19:06:18
先学着,以后会用到的
#44楼 得分:0回复于:2009-11-26 19:08:38
ding
#45楼 得分:0回复于:2009-11-26 19:08:38
学习
#46楼 得分:0回复于:2009-11-26 19:23:07
收藏了
#47楼 得分:0回复于:2009-11-26 19:33:34
#48楼 得分:0回复于:2009-11-26 19:52:06
先顶了再看
#49楼 得分:0回复于:2009-11-26 20:17:28
不错
但是没有了frame的一些重要属性,比如window的特性,这个布局就和Table布局没多少区别了?
还是我没看明白?
#50楼 得分:0回复于:2009-11-26 20:36:44
it is but I do't KNOK
  • Flyinsky1用户头像
  • Flyinsky1
  • (吾不欲远行 奈何吾已行远 )
  • 等 级:
#51楼 得分:0回复于:2009-11-26 20:42:39
丁页,deyiending。
  • j2eeoriented用户头像
  • j2eeoriented
  • (正义呼唤我 美女需要我)
  • 等 级:
#52楼 得分:0回复于:2009-11-26 20:57:56
..
#53楼 得分:0回复于:2009-11-26 21:01:54
顶  学习了!!!
  • dean97用户头像
  • dean97
  • (dean97)
  • 等 级:
#54楼 得分:0回复于:2009-11-26 21:05:53
hao a wo ai kan 
#55楼 得分:0回复于:2009-11-26 21:19:27
up..
#56楼 得分:0回复于:2009-11-26 21:27:00
xue xi xia!!
#57楼 得分:0回复于:2009-11-26 22:11:56
学习...
  • hfdsoft用户头像
  • hfdsoft
  • (在CODE中迷茫)
  • 等 级:
#58楼 得分:0回复于:2009-11-26 22:28:21
为什么要仿呢。
  • ldming用户头像
  • ldming
  • (东明 )
  • 等 级:
#59楼 得分:0回复于:2009-11-26 22:32:37
顶,没的说!!
#60楼 得分:0回复于:2009-11-26 23:05:10
太厚重了,看不懂
#61楼 得分:0回复于:2009-11-26 23:11:56
  • cdcjk用户头像
  • cdcjk
  • (攀辉)
  • 等 级:
#62楼 得分:0回复于:2009-11-27 00:05:18
学习了
#63楼 得分:0回复于:2009-11-27 00:32:58
很厉害!!
#64楼 得分:0回复于:2009-11-27 00:52:40
好东西。收藏先,顺便接分。
  • hetl_1985用户头像
  • hetl_1985
  • (悔说话的哑巴)
  • 等 级:
#65楼 得分:0回复于:2009-11-27 08:27:35
学习
#66楼 得分:0回复于:2009-11-27 08:34:12
学习
  • mykelly6用户头像
  • mykelly6
  • (突然发现头像没有下半身^..^)
  • 等 级:
#67楼 得分:0回复于:2009-11-27 08:36:08
引用 22 楼 ileson 的回复: 弱弱的问一下: 怎么实现左点右出?

用js隐藏右边的一些内容吧,点击左边的菜单就把右边对应的内容显示出来的。
我用jquery的tab改过。


不过这样容易导致页面过大。。。
#68楼 得分:0回复于:2009-11-27 08:38:08
挺个!
#69楼 得分:0回复于:2009-11-27 08:43:52
顶一下
#70楼 得分:0回复于:2009-11-27 08:49:13
学习
#71楼 得分:0回复于:2009-11-27 08:51:05
引用 6 楼 anglebabyhong 的回复:
学习了
  • wotent用户头像
  • wotent
  • (wotent)
  • 等 级:
#72楼 得分:0回复于:2009-11-27 08:52:03
学习一下。。。
#73楼 得分:0回复于:2009-11-27 08:58:56
这个不顶是不行了,我现在正为这个问题发愁,多谢分享!
#74楼 得分:0回复于:2009-11-27 09:02:14
标记一下 学习
#75楼 得分:0回复于:2009-11-27 09:11:35
非常值得研究啊
#76楼 得分:0回复于:2009-11-27 09:24:50
学习!jf
#77楼 得分:0回复于:2009-11-27 09:25:01
顶!楼主好样的.
  • lxiron用户头像
  • lxiron
  • (正在向.net高手挺进!)
  • 等 级:
#78楼 得分:0回复于:2009-11-27 09:27:54
谢谢楼主,学习了!
#79楼 得分:0回复于:2009-11-27 09:28:11
路过的。。。。mark
#80楼 得分:0回复于:2009-11-27 09:34:25
好好学习
  • xxc3303用户头像
  • xxc3303
  • (超级奶崽)
  • 等 级:
#81楼 得分:0回复于:2009-11-27 09:35:47
嗯 不错
#82楼 得分:0回复于:2009-11-27 09:52:00
此帖必火啊
#83楼 得分:0回复于:2009-11-27 10:02:08
学习了 3Q
#84楼 得分:0回复于:2009-11-27 10:02:38
sf
#85楼 得分:0回复于:2009-11-27 10:15:45
  • lmafwo用户头像
  • lmafwo
  • (阿飞)
  • 等 级:
#86楼 得分:0回复于:2009-11-27 10:16:50
学习  up
  • fyqwork用户头像
  • fyqwork
  • (秋风落叶)
  • 等 级:
#87楼 得分:0回复于:2009-11-27 10:44:14
up
  • byte377用户头像
  • byte377
  • (壹剑飘血)
  • 等 级:
#88楼 得分:0回复于:2009-11-27 10:48:49
学习了
#89楼 得分:0回复于:2009-11-27 10:59:37
学习了。
#90楼 得分:0回复于:2009-11-27 11:12:15
嘿嘿。。。路过留下脚印。。。。
#91楼 得分:0回复于:2009-11-27 11:13:42
顶,学习了
#92楼 得分:0回复于:2009-11-27 11:15:43
学习一下。
#93楼 得分:0回复于:2009-11-27 11:17:46
#94楼 得分:0回复于:2009-11-27 11:21:04
不錯.支持樓主,順便接分..
#95楼 得分:0回复于:2009-11-27 11:34:34
我要下载,不要搞的那么麻烦嘛
  • samyou用户头像
  • samyou
  • (samyou)
  • 等 级:
#96楼 得分:0回复于:2009-11-27 11:45:56
学习啊
  • haimoaoy用户头像
  • haimoaoy
  • (灰常懒, 没昵称!)
  • 等 级:
#97楼 得分:0回复于:2009-11-27 11:59:05
学习学习
#98楼 得分:0回复于:2009-11-27 12:55:39
不明白你这样写有什么好处吗?
#99楼 得分:0回复于:2009-11-27 12:58:53
学习一下
#100楼 得分:0回复于:2009-11-27 13:02:27
相关问题
请教:程序模块在简体和繁体同时存在的解决方法Web 开发/ ASP - CSDN ...