亚洲欧美不卡高清在线,亚洲一级精品视频,国产精品一国产精品

　div仿框架方法詳解

作者：14px　時(shí)間： 2009-05-19　文檔類(lèi)型：原創(chuàng)　來(lái)自：藍(lán)色理想

第 1 頁(yè) div仿框架方法詳解 [1]
第 2 頁(yè) div仿框架方法詳解 [2]
第 3 頁(yè) div仿框架方法詳解 [3]
第 4 頁(yè) div仿框架方法詳解 [4]

但在實(shí)際應(yīng)用中主體部分常常是個(gè)iframe，加個(gè)iframe，IE7則無(wú)法適應(yīng)。T_T

運(yùn)行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" title="Home" /> <title>div仿框架布局 - 但在實(shí)際應(yīng)用中主體部分常常是個(gè)iframe</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { height:100%; overflow:hidden; background:#fff;} body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} .main iframe { width:100%; height:100%;} /*---ie6---*/ html { _padding:70px 10px;} .top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} </style> </head> <body> <div class="top">但在實(shí)際應(yīng)用中主體部分常常是個(gè)iframe，加個(gè)iframe，IE7則無(wú)法適應(yīng)</div> <div class="side"> </div> <div class="main"> <iframe frameborder="0" src="http://www.g.cn/"></iframe> </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

而且……其實(shí)IE7下還不止這一點(diǎn)bug（雖然可以直接overflow-y:scroll，但我于心不忍）。

運(yùn)行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" title="Home" /> <title>div仿框架布局 - 其實(shí)IE7下還不止這一點(diǎn)bug</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { height:100%; overflow:hidden; background:#fff;} body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto; font-size:14px;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} /*---ie6---*/ html { _padding:70px 10px;} .top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} </style> </head> <body> <div class="top">其實(shí)IE7下還不止這一點(diǎn)bug</div> <div class="side"> </div> <div class="main"> 現(xiàn)在請(qǐng)換用IE7瀏覽器測(cè)試，縮小窗口直到出現(xiàn)滾動(dòng)條恢復(fù)后會(huì)出現(xiàn)一段無(wú)聊的距離然后再刷新這段距離又消失事實(shí)證明這段無(wú)聊的距離與滾動(dòng)條寬度相等。 </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

所幸IE7和IE6的html標(biāo)簽有著相同的盒模型，所以可以直接將IE6 only的部分修改為IE6+IE7 only。

運(yùn)行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" title="Home" /> <title>div仿框架布局 - 所幸IE7和IE6的html標(biāo)簽有著相同的盒模型</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { height:100%; overflow:hidden; background:#fff;} body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto; font-size:14px;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} /*---ie6 / ie7---*/ html { *padding:70px 10px;} .top { *height:50px; *margin-top:-60px; *margin-bottom:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} .side { *height:100%; *float:left; *width:200px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} .main { *height:100%; *margin-left:210px; _margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} .bottom { *height:50px; *margin-top:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} </style> </head> <body> <div class="top">所幸IE7和IE6的html標(biāo)簽有著相同的盒模型，所以可以直接將IE6 only的部分修改為IE6+IE7 only</div> <div class="side"> </div> <div class="main"> 現(xiàn)在請(qǐng)換用IE7瀏覽器測(cè)試，縮小窗口直到出現(xiàn)滾動(dòng)條，看，現(xiàn)在沒(méi)有無(wú)聊的距離了吧。它被我們修了。再?gòu)?fù)述一遍這段文字才夠長(zhǎng)，不要嫌我羅嗦：現(xiàn)在請(qǐng)換用IE7瀏覽器測(cè)試，縮小窗口直到出現(xiàn)滾動(dòng)條，看，現(xiàn)在沒(méi)有無(wú)聊的距離了吧。它被我們修了。 </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

iframe無(wú)法適應(yīng)高度的bug也一起被修復(fù)了，人生真美好。

運(yùn)行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" title="Home" /> <title>div仿框架布局 - iframe無(wú)法適應(yīng)高度的bug也一起被修復(fù)了</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { height:100%; overflow:hidden; background:#fff;} body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} .main iframe { width:100%; height:100%;} /*---ie6---*/ html { *padding:70px 10px;} .top { *height:50px; *margin-top:-60px; *margin-bottom:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} .side { *height:100%; *float:left; *width:200px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} .main { *height:100%; *margin-left:210px; _margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} .bottom { *height:50px; *margin-top:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;} </style> </head> <body> <div class="top">看，親愛(ài)的，iframe無(wú)法適應(yīng)高度的bug也一起被修復(fù)了。不過(guò)這個(gè)修復(fù)也可以想想其他的辦法：）辦法就在本文中，有興趣的朋友可以自己摸索。</div> <div class="side"> </div> <div class="main"> <iframe frameborder="0" src="http://www.g.cn/"></iframe> </div> <div class="bottom"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

謝謝觀(guān)賞。

經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2928157-1-1.html

本文鏈接：http://www.95time.cn/tech/web/2009/6716.asp　

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁(yè) div仿框架方法詳解 [3] 下一頁(yè)

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。

相關(guān)文章

更多相關(guān)鏈接

XPath詳解,總結(jié)

WebServices返回?cái)?shù)據(jù)的4種方法比較

利用CSS布局到底有多難?

用div+css模擬表格對(duì)角線(xiàn)

Flex 3 RIA開(kāi)發(fā)詳解與精深實(shí)踐

作者文章

層疊加的五條疊加法則

超過(guò)寬度顯示省略號(hào)(無(wú)js全兼容)


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門(mén)搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁(yè)制作 web標(biāo)準(zhǔn) 用戶(hù)體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大福“敬•自然”設(shè)計(jì)大賽開(kāi)啟

國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國(guó)國(guó)防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問(wèn)題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀(guān)"

1499元買(mǎi)真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語(yǔ)言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡(jiǎn)單繪制一個(gè)可愛(ài)的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡(jiǎn)單的作品展示頁(yè)面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開(kāi)發(fā)項(xiàng)目

Illustrator中制作針線(xiàn)縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx