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

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

新聞中心

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

本文和大家重點討論一下DIV高度自適應(yīng)的三種有效解決方法，它們分別是一是JS法、二是背景圖填充法、三是“補(bǔ)丁大法”（比較變態(tài)）。

我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站設(shè)計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、臨沂ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的臨沂網(wǎng)站制作公司

DIV高度自適應(yīng)的三種有效解決方法

DIV＋CSS設(shè)計儼然已成網(wǎng)頁設(shè)計界的標(biāo)準(zhǔn)了。這種設(shè)計的好處大家都是知道的，但有些小問題確實很棘手，例如令人頭痛的“DIV高度自適應(yīng)”問題。

現(xiàn)在有三種解決DIV高度自適應(yīng)行之有效的辦法，一是JS法、二是背景圖填充法、三是“補(bǔ)丁大法”（比較變態(tài)）。

1、JS法

代碼如下。原理：用JS判斷左右DIV的高度，若不一致則設(shè)為一致。

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2. 
  
  
  
  3. float:left;border:1pxsolid#265492;">left
 
  • background:#376037;"> 
  • right
     
  • right
     
  • right
     
  • right
     
  • right
     
  • right
     
  • right
     
  •  
  •  
  •  
  •  
  •  

    •  2、背景圖填充法

    第二種解決DIV高度自適應(yīng)的方法是背景圖填充法，這是大站用得比較多的方法，如163等，研究了一下，結(jié)果如下。

    這里是給父DIV設(shè)置了背景圖片填充，所有DIV都不設(shè)高度。

    HTML代碼（取自163最終頁面）：

     
 
 
      
  
  
  
    1.  
      2. 
  
  
  
    2. 第一列　左邊正文
     
  • 第二列　右邊

     
  •  









  • 字字
    •  
  • 第三列　中間圖片
    •  
    •  
  •  
  •  

    •  CSS代碼（取自163最終頁面）：

     
 
 
      
  
  
  
    1. .endArea{margin:0auto;width:960px;  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3. background:url(http://cimg2.163.com/cnews/img07/end_n_bg1.gif);clear:both;}  
      4. 
  
  
  
    4. .endArea.col1{float:left;width:573px;}  
      5. 
  
  
  
    5. .endArea.col2{float:left;width:25px;}  
      6. 
  
  
  
    6. .endArea.col3{float:right;width:362px;}  
      7. 
  
  
  
    7.  
      8.

     3、補(bǔ)丁大法

    最后一種DIV高度自適應(yīng)的方法就是補(bǔ)丁大法。就是　“隱藏容器溢出”和“正內(nèi)補(bǔ)丁”和“負(fù)外補(bǔ)丁”結(jié)合的方法。比較另類一點的方法，在IE6、IE7、FF3下測試通過。原理自己理解。

    要點：

    1、父DIV設(shè)置　overflow:hidden;

    2、對要高度自適應(yīng)的DIV設(shè)置　padding-bottom:100000px;margin-bottom:-100000px;兩列或多列同理。

    代碼如下：

     
 
 
      
  
  
  
    1.  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  
      4. 
  
  
  
    4. Copterfly'sBlog 
      5. 
  
  
  
    5.  
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.  
      8. 
  
  
  
    8.  
      9. 
  
  
  
    9.  
      10. 
  
  
  
    10.  
      11. 
  
  
  
    11. 
  
  
  
    12. background:#777;">Left
     
  • background:#999;"> 
  • Middle
     
  • Middle
     
  • Middle
     
  • Middle
     
  • Middle
     
  • Middle
     
  • Middle
     
  • Middle
     
  • Middle
     
  •  
  • background:#888;">Right
    •  
  •  
  •  
  •  

    •  請根據(jù)實際情況，三選一用。


    網(wǎng)站標(biāo)題：三種有效解決DIV高度自適應(yīng)的方法
    路徑分享：http://www.5511xx.com/article/dpoheie.html

    其他資訊