日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
四種方法解決DIV高度自適應(yīng)問題

本文和大家重點(diǎn)討論一下解決DIV高度自適應(yīng)的方法，這里主要從四個(gè)方面來向大家介紹，相信通過本文學(xué)習(xí)你對(duì)DIV高度自適應(yīng)問題會(huì)有更加深刻的認(rèn)識(shí)。

術(shù)業(yè)有專攻，您咨詢的再多，也不如我了解的一半多；有責(zé)任心的專業(yè)網(wǎng)站制作公司會(huì)做到“客戶想到的我們要做到，客戶沒有想到的我們也要幫客戶做到“。我們的設(shè)計(jì)師是5年以上的設(shè)計(jì)師，我們不僅僅會(huì)設(shè)計(jì)網(wǎng)站，更會(huì)策劃網(wǎng)站。

DIV高度自適應(yīng)

關(guān)于DIV高度的自適應(yīng)，一直是個(gè)讓人頭疼的問題，整理了一下以前總結(jié)的方法，僅表示我也玩過。

htmlcode:

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2. 　　這邊的高度自適應(yīng)右側(cè)的高度
 
  • 　　 
  • 　　　　 
  • 　　
    •  
  •  
  •  

    •  可用的方法大概有以下四種：

    1，用absolute設(shè)置一個(gè)足夠高的高度，在父級(jí)元素中清除溢出的部分,具體的csscode如下：

     
 
 
      
  
  
  
    1. #container{font-size:14px;width:300px;overflow:hidden;  
      2.   
  
  
    2.  
      3.   
  
  
    3. border:3pxsolidblue;margin:10pxauto0;  
      4.   
  
  
    4. color:#fff;position:relative;}  
      5.   
  
  
    5. #leftSide{width:100px;float:left;height:200000px;  
      6.   
  
  
    6.  
      7.   
  
  
    7. left:0;top:0;position:absolute;background:gray;}  
      8.   
  
  
    8. #rightSide{width:190px;float:right;  
      9.   
  
  
    9.  
      10.   
  
  
    10. text-align:center;background:purple;}  
      11.

    其實(shí)這種方法并沒有真正的實(shí)現(xiàn)左右兩個(gè)div等高，只是用了障眼法，利用container的overflow:hidden清除了左側(cè)多余的部分，以達(dá)到視覺上左右等高的目的，雖然有“白貓黑貓，逮著老鼠就是好貓”的說法，但是筆者并不著重推薦這種方法，因?yàn)榻o父級(jí)元素添加relative，會(huì)帶來很多不必要的麻煩，況且只能是設(shè)置absolute的一側(cè)自適應(yīng)另一側(cè)的高度，并不能讓兩側(cè)中任一側(cè)去自由去適應(yīng)另一側(cè)！

    2，負(fù)外補(bǔ)丁和正內(nèi)補(bǔ)丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相結(jié)合

     
 
 
      
  
  
  
    1. #container{font-size:14px;width:300px;overflow:hidden;  
      2.   
  
  
    2. border:3pxsolidblue;margin:10pxauto0;color:#fff;}  
      3.   
  
  
    3. #leftSide{width:100px;float:left;background:gray;  
      4.   
  
  
    4.  
      5.   
  
  
    5. padding-bottom:9999px;margin-bottom:-9999px;}  
      6.   
  
  
    6. #rightSide{width:190px;float:right;text-align:center;  
      7.   
  
  
    7.  
      8.   
  
  
    8. background:purple;padding-bottom:9999px;  
      9.   
  
  
    9. margin-bottom:-9999px;}  
      10.

    3，利用javascript腳本實(shí)現(xiàn)動(dòng)態(tài)設(shè)置高度

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.

     事實(shí)上，這種辦法真正意義上實(shí)現(xiàn)了兩側(cè)等高，并且能讓兩側(cè)中任一側(cè)去自由去適應(yīng)另一側(cè)，但是其缺點(diǎn)就在于，只有當(dāng)DOM加載完成后，才有會(huì)這樣等高的效果，如果網(wǎng)速夠快，這個(gè)漏洞可以忽略不計(jì)。

    4，在父級(jí)元素中填充背景

    CSS code如下：

     
 
 
      
  
  
  
    1. #container{font-size:14px;width:300px;overflow:hidden;  
      2.   
  
  
    2. border:3pxsolidblue;  
      3.   
  
  
    3.  
      4.   
  
  
    4. margin:10pxauto0;color:#fff;  
      5.   
  
  
    5.  
      6.   
  
  
    6. background:url(http://www.men-ideal.com/images/unit1030.jpg)repeat-y;}  
      7.   
  
  
    7. #leftSide{width:100px;float:left;}  
      8.   
  
  
    8. #rightSide{width:190px;float:right;text-align:center}  
      9.

     目前，這種方法是最流行的，同樣也是一種“欺騙性”的解決辦法，不過除了多使用一張圖片之外，都可以堪稱完美，這也是筆者極力推薦的！


    網(wǎng)站欄目：四種方法解決DIV高度自適應(yīng)問題
    文章路徑：http://www.5511xx.com/article/dhspdis.html