我們的生活越來(lái)越精彩
          學(xué)無(wú)止境,恒心,毅力,堅(jiān)持
          posts - 20,  comments - 6,  trackbacks - 0

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

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

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

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

          1. 可以使用css布局來(lái)實(shí)現(xiàn),即可以少一個(gè)頁(yè)面,也可以提高執(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. 絕對(duì)定位模擬iframe

          滾動(dòng)條在外邊
          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

          滾動(dòng)條在里邊
          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

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

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


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

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

          常用鏈接

          留言簿(2)

          隨筆檔案

          文章檔案

          喜歡的技術(shù)博客

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

          搜索

          •  

          最新評(píng)論

          閱讀排行榜

          評(píng)論排行榜

          主站蜘蛛池模板: 凤翔县| 贵南县| 蒲城县| 建湖县| 汉中市| 绵阳市| 通化市| 廉江市| 山阴县| 鄂伦春自治旗| 江门市| 龙州县| 克山县| 临沭县| 报价| 弥渡县| 屯昌县| 浏阳市| 资溪县| 营口市| 花莲县| 宣威市| 成武县| 法库县| 青铜峡市| 河池市| 神农架林区| 怀远县| 景泰县| 岑巩县| 犍为县| 乌审旗| 白玉县| 正定县| 全南县| 修武县| 施秉县| 西乡县| 石楼县| 沁源县| 冀州市|