用CSS構(gòu)建iframe效果代碼
更新時間：2007年06月24日 00:00:00 作者：
iframe應(yīng)用很普遍，通常的需求有兩種：
1，獲取iframe效果，就是帶一個滾動條，可以省不少版面。
2，要嵌一個頁面，實現(xiàn)框架鏈接。
如果不方便使用iframe，可以有如下解決方案：
第一種需求如果我們使用css布局來實現(xiàn)，即可以少一個頁面，也可以提高效率。
第二種需求可以采用xmlhttp遠(yuǎn)程獲取。
A. 直接模擬iframe
用層做容器
#content { overflow:auto; height:200px; width:600px; background:#f00;}
效果演示源代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
用body做容器
html { overflow:hidden; height:100%; background:#fff; border:0;}
* html { padding:100px 0 0 100px;}
body { overflow:scroll; background:#f00; margin:0; position:absolute; top:100px; left:100px; bottom:0; right:0;}
* html body { height:100%; width:100%;}
效果演示源代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
B. 絕對定位模擬iframe
滾動條在外邊
html { overflow:hidden; border:0; height:100%; max-height:100%;}
body { overflow:hidden; margin:0; height:100%; max-height:100%; position:relative;}
#head { position:absolute; top:0; right:15px; width:100%; height:100px; background:#f00; z-index:2;}
#foot { position:absolute; bottom:0; right:15px; width:100%; background:#f00; height:50px;z-index:2;}
#content { height:100%; position:relative; z-index:1; overflow:auto;}
效果代碼演示
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
滾動條在里邊
html { height:100%; max-height:100%; border:0; overflow:hidden;}
* html { padding:100px 0 50px 0;}
body { height:100%; max-height:100%; margin:0; overflow:hidden;}
#content { position:absolute; top:100px; bottom:50px; left:0; right:0; z-index:3; width:100%; overflow:auto;}
* html #content { top:100px; bottom:0; height:100%;}
#head { position:absolute; margin:0; top:0; left:0; width:100%; height:100px; background:#f00; z-index:5;}
#foot { position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background:#f00;}
效果演示代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
1，獲取iframe效果，就是帶一個滾動條，可以省不少版面。
2，要嵌一個頁面，實現(xiàn)框架鏈接。
如果不方便使用iframe，可以有如下解決方案：
第一種需求如果我們使用css布局來實現(xiàn)，即可以少一個頁面，也可以提高效率。
第二種需求可以采用xmlhttp遠(yuǎn)程獲取。
A. 直接模擬iframe
用層做容器
#content { overflow:auto; height:200px; width:600px; background:#f00;}
效果演示源代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
用body做容器
html { overflow:hidden; height:100%; background:#fff; border:0;}
* html { padding:100px 0 0 100px;}
body { overflow:scroll; background:#f00; margin:0; position:absolute; top:100px; left:100px; bottom:0; right:0;}
* html body { height:100%; width:100%;}
效果演示源代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
B. 絕對定位模擬iframe
滾動條在外邊
復(fù)制代碼 代碼如下:
html { overflow:hidden; border:0; height:100%; max-height:100%;}
body { overflow:hidden; margin:0; height:100%; max-height:100%; position:relative;}
#head { position:absolute; top:0; right:15px; width:100%; height:100px; background:#f00; z-index:2;}
#foot { position:absolute; bottom:0; right:15px; width:100%; background:#f00; height:50px;z-index:2;}
#content { height:100%; position:relative; z-index:1; overflow:auto;}
效果代碼演示
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
滾動條在里邊
復(fù)制代碼 代碼如下:
html { height:100%; max-height:100%; border:0; overflow:hidden;}
* html { padding:100px 0 50px 0;}
body { height:100%; max-height:100%; margin:0; overflow:hidden;}
#content { position:absolute; top:100px; bottom:50px; left:0; right:0; z-index:3; width:100%; overflow:auto;}
* html #content { top:100px; bottom:0; height:100%;}
#head { position:absolute; margin:0; top:0; left:0; width:100%; height:100px; background:#f00; z-index:5;}
#foot { position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background:#f00;}
效果演示代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
今天在藍(lán)色理想瞎逛，看見了Realazy的教程CSS Sprites，于是來自己做了個小東西，效果在這里2008-05-05
CSS計數(shù)器是一個強(qiáng)大但經(jīng)常被忽視的工具,它們允許開發(fā)者創(chuàng)建和管理計數(shù)器,這些計數(shù)器可以在文檔中自動遞增,非常適合用于編號章節(jié)、列表項或其他文檔元素,它們具有強(qiáng)大的瀏覽器支持2025-02-02
這里面整理的css都是些比較經(jīng)典的應(yīng)用，方便網(wǎng)頁愛好者制作出更好的效果2008-09-09
2008-01-01
用CSS打造 抽屜菜單...2006-12-12
越發(fā)感覺網(wǎng)頁設(shè)計人員的辛苦，就一個自動換行，2008-08-08
首先是在www.126.com上發(fā)現(xiàn)的,感覺很好用很奧妙,值得收藏和分享 通過css來讀取圖片坐標(biāo)系實現(xiàn)局部背景圖2008-05-05
IE6，IE7和firefox對DIV的支持區(qū)別...2007-09-09
無js5款純div+css制作的彈出菜單標(biāo)準(zhǔn)
無js5款純div+css制作的彈出菜單標(biāo)準(zhǔn)...2007-09-09
會移動的文字(Marquee)...2006-11-11