小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

分享

DIV高度自適應(yīng)及應(yīng)該注意的問題

 YSY私館 2013-07-04

DIV高度自適應(yīng)及應(yīng)該注意的問題

本文和大家重點(diǎn)討論一下DIV高度自適應(yīng)及注意問題,主要包括父div高度隨子div的高度改變而改變和子div高度隨父親div高度改變而改變兩種情況。

DIV高度自適應(yīng)及注意問題

積累了一些經(jīng)驗(yàn),總結(jié)出一些關(guān)于div高度自適應(yīng)的技巧,希望有助于大家,轉(zhuǎn)載請(qǐng)標(biāo)明出處,謝謝。

一、DIV高度自適應(yīng)(父div高度隨子div的高度改變而改變)

1、如果父div不定義height、子div均為標(biāo)準(zhǔn)流的時(shí)候,父divheight隨內(nèi)容的變化而變化,實(shí)現(xiàn)父div高度隨子div的高度改變而改變。

代碼: 

<style type="text/css"> 

    #aa{border:#000000 solid 5px}  

    #bb{border:#00ffff solid 5px;}  

    #cc{border:#0033CC solid 5px}  

</style> 

<div id="aa">div  

   <div id="bb">div</div> 

   <div id="cc">div</div> 

</div> 

 

2、如果父div定義height,div均為標(biāo)準(zhǔn)流的時(shí)候,在IE下父divheight隨內(nèi)容變化而變化,ff中則固定大小,如父div設(shè)置height:50px

代碼: 

<style type="text/css"> 

    #aa{border:#000000 solid 5px; height:50px}  

    #bb{border:#00ffff solid 5px;}  

    #cc{border:#0033CC solid 5px}  

</style> 

<div id="aa">div  

   <div id="bb">div</div> 

   <div id="cc">div</div> 

</div> 

IE效果

FF下效果

 
 

3、如果子div使用了float屬性,此時(shí)已經(jīng)脫離標(biāo)準(zhǔn)流,父div不會(huì)隨內(nèi)容的高度變化而變化,解決的辦法是在浮動(dòng)的div下面,加一個(gè)空div,設(shè)置clear屬性both

未加空div代碼: 

<style type="text/css"> 

#aa{border:#000000 solid 5px;}  

#bb{border:#00ffff solid 5px; float:left}  

#cc{border:#0033CC solid 5px; float:left}  

</style> 

<div id="aa">div  

   <div id="bb">div</div> 

   <div id="cc">div</div> 

</div> 

IE效果:

FF效果:

修改后代碼: 

<style type="text/css"> 

#aa{border:#000000 solid 5px;}  

#bb{border:#00ffff solid 5px; float:left}  

#cc{border:#0033CC solid 5px; float:left}  

</style> 

<div id="aa">div  

   <div id="bb">div</div> 

   <div id="cc">div</div>

  <div style="clear:both"></div>

</div> 

修改后效果:IEFF一致 

4.另類的DIV高度自適應(yīng)
原理:
padding-bottom
將列拉長(zhǎng)變的一樣高,而負(fù)的margin-bottom又使其回到底部開始的位置,同時(shí),溢出部分隱藏掉了。此方法必須加文檔信息才能正常顯示
代碼: 

<http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www./1999/xhtml"> 

<style type="text/css"> 

   #aa{border:#000000 solid 5px; overflow:hidden;}  

   #bb{border:#00ffff solid 5px; float:left; padding-bottom:100000px; margin-bottom:-100000px;}  

   #cc{border:#0033CC solid 5px; float:left; padding-bottom:100000px; margin-bottom:-100000px;}  

   #dd{float:left}  

</style> 

<div id="aa"> 

<div id="bb">div</div> 

<div id="cc">div</div> 

<div id="dd">div<br/><br/><br/><br/><br/>

</div> 

效果:

二、DIV高度自適應(yīng)(子div高度隨父親div高度改變而改變)

在有邊框的情況下,你會(huì)發(fā)現(xiàn)同一個(gè)div,IE下的高度和在FF下的高度是不一樣的,比如你設(shè)置了高度為100pxdiv,邊框是border:5px;IE的高度是5+5+空白區(qū)域=100px,而FF下高度是100pxdiv是不包括高度的,只是空白區(qū)域的高度,如下圖黑框的部分:

 
 


黑框的上方是對(duì)齊的,但是設(shè)置了同樣的高度,效果卻不一樣,代碼如下:

<style type="text/css"> 
#aa{border:#000000 solid 5px;height:100px;}  
#bb{border:#00ffff solid 5px;float:left; height:100%}  
#cc{border:#0033CC solid 5px;float:left;}  
</style> 
<div id="aa"> 
<div id="bb">div</div> 
<div id="cc">div</div> 
</div> 

如果沒有設(shè)置邊框,完全沒有高度不一致的情況,子div適應(yīng)父div很簡(jiǎn)單,如上面代碼,只是在子div加了height:100%屬性即可。如果設(shè)置了邊框,可以把子div的高度設(shè)置為比父div小上下邊框高度的值,比如在此例中,可把#bbheight改為100-5-590px,結(jié)果在IEMozilla中顯示一致。

有一點(diǎn)要注意,如果父divbody的話,也就是說一個(gè)body套了一個(gè)div,讓div適合body的大小的,必須設(shè)置body的高度才能實(shí)現(xiàn)子divbody改變而改變,body{height:100%}

 

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約