日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

新聞中心

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

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

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

DIV高度自適應的三種有效解決方法

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

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

1、JS法

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

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

    •  2、背景圖填充法

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

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

    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、補丁大法

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

    要點：

    1、父DIV設置　overflow:hidden;

    2、對要高度自適應的DIV設置　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ù)實際情況，三選一用。


    分享文章：三種有效解決DIV高度自適應的方法
    本文來源：http://www.dlmjj.cn/article/dpoheie.html

    其他資訊