我們的生活越來越精彩
          學(xué)無止境,恒心,毅力,堅持
          posts - 20,  comments - 6,  trackbacks - 0

          用CSS構(gòu)建iframe的滾動條

          iframe應(yīng)用很普遍,通常的需求有兩種:

          1. 獲取iframe效果,就是帶一個滾動條,可以省不少版面。
          2. 要嵌一個頁面,實現(xiàn)框架鏈接。

          如果不方便使用iframe,可以有如下相應(yīng)解決方案:

          1. 可以使用css布局來實現(xiàn),即可以少一個頁面,也可以提高執(zhí)行效率。
          2. 可以采用xmlhttp遠(yuǎn)程獲取數(shù)據(jù)。

          A. 直接模擬iframe

          用層做容器

          #content { overflow:auto; height:185px; width:600px; background:#ccc; padding:10px;}

          效果演示:http://www.rexsong.com/blog/attachments/200601/02_150246_cssiframe1.htm

          用body做容器
          html { overflow:hidden; height:100%; background:#fff; border:0;}
          * html { padding:200px 0 0 100px;}
          body { overflow:auto; background:#ccc; margin:0; position:absolute; top:200px; left:100px; bottom:0; right:0;}
          * html body { height:100%; width:100%; position:static;}

          效果演示:http://www.rexsong.com/blog/attachments/200601/02_151517_cssiframe2.htm

          B. 絕對定位模擬iframe

          滾動條在外邊
          html { overflow:hidden; border:0; height:100%;}
          body { overflow:hidden; margin:0; height:100%; position:relative;}
          #content { height:100%; position:relative; z-index:1; overflow:auto;}
          #head { position:absolute; top:0; right:16px; width:100%; height:100px; background:#ccc; z-index:2;}
          #foot { position:absolute; bottom:0; right:16px; width:100%; background:#ccc; height:50px;z-index:2;}

          效果演示:http://www.rexsong.com/blog/attachments/200601/02_151837_cssiframe3.htm

          滾動條在里邊
          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:#ccc; z-index:5;}
          #foot { position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background:#ccc;}

          效果演示:http://www.rexsong.com/blog/attachments/200601/02_153241_cssiframe4.htm

          強調(diào)一下,standard模式要把body看作是一個容器,基本和div類似,這和傳統(tǒng)觀念是很不一樣。搞清楚了html與body的關(guān)系,關(guān)于高級布局的很多問題自然迎刃而解。
          posted on 2008-06-02 14:59 鳥生魚湯 閱讀(1123) 評論(0)  編輯  收藏

          只有注冊用戶登錄后才能發(fā)表評論。


          網(wǎng)站導(dǎo)航:
           

          <2008年6月>
          25262728293031
          1234567
          891011121314
          15161718192021
          22232425262728
          293012345

          常用鏈接

          留言簿(2)

          隨筆檔案

          文章檔案

          喜歡的技術(shù)博客

          喜歡的有意思有味道的博客 放松并鼓勵自己

          搜索

          •  

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 广安市| 乐昌市| 临泽县| 沙洋县| 惠安县| 芷江| 东安县| 南溪县| 安远县| 溧阳市| 长顺县| 密山市| 杭州市| 厦门市| 思南县| 甘孜| 车险| 长岭县| 秀山| 山西省| 张家川| 哈巴河县| 香河县| 额尔古纳市| 松溪县| 绥中县| 镇康县| 宁乡县| 南陵县| 清徐县| 甘洛县| 绥棱县| 银川市| 合江县| 平乡县| 临沂市| 雅安市| 建昌县| 青浦区| 吉水县| 柘荣县|