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

          用CSS構建iframe的滾動條

          iframe應用很普遍,通常的需求有兩種:

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

          如果不方便使用iframe,可以有如下相應解決方案:

          1. 可以使用css布局來實現,即可以少一個頁面,也可以提高執行效率。
          2. 可以采用xmlhttp遠程獲取數據。

          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

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

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


          網站導航:
           

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

          常用鏈接

          留言簿(2)

          隨筆檔案

          文章檔案

          喜歡的技術博客

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

          搜索

          •  

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 博兴县| 土默特右旗| 招远市| 马鞍山市| 图片| 高淳县| 福鼎市| 河津市| 通辽市| 明光市| 鄂托克旗| 抚顺县| 彩票| 泰宁县| 三都| 大田县| 巴彦县| 乐都县| 佳木斯市| 南和县| 永康市| 靖州| 瓦房店市| 凉城县| 保德县| 惠东县| 盈江县| 兰坪| 泾阳县| 宁陕县| 海南省| 崇仁县| 巴彦县| 伊宁县| 阿瓦提县| 陆良县| 鱼台县| 英超| 九寨沟县| 泊头市| 涡阳县|