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

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
DIV高度自適應(yīng)方法匯總

你對(duì)DIV高度自適應(yīng)的方法是否了解，這里和大家分享一下，網(wǎng)站制站中，我們經(jīng)常要把兩個(gè)并排顯示的div實(shí)現(xiàn)一樣高的效果，即每列高度相同，有以下幾種方法。

創(chuàng)新互聯(lián)公司長(zhǎng)期為上千余家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為柳南企業(yè)提供專(zhuān)業(yè)的網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)，柳南網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

DIV高度自適應(yīng)方法匯總

網(wǎng)站優(yōu)化（seo）中，提到過(guò)網(wǎng)站樣式的優(yōu)化，即在網(wǎng)站的布局設(shè)計(jì)中，采用DIV+CSS來(lái)布局。網(wǎng)站制站中，我們經(jīng)常要把兩個(gè)并排顯示的div實(shí)現(xiàn)一樣高的效果，即每列高度（事先并不能確定哪列的高度）的相同，有以下幾種方法解決DIV高度自適應(yīng)問(wèn)題：

1、JS實(shí)現(xiàn)（判斷2個(gè)div高）；

2、純CSS方法；

3、加背景圖片實(shí)現(xiàn)。

◆DIV+CSS基本布局：

 
 
 
    
  
  
  
  1.  
    2.
 
    •  
  •  

    1、js實(shí)現(xiàn)div高度自適應(yīng)

    代碼如下：

     
 
 
      
  
  
  
    1.  
      2. 
  
  
  
    2.  
      3.

     （注：網(wǎng)上公布了不少方法，但代碼或多或少有錯(cuò)；上面的是無(wú)錯(cuò)代碼；上面的代碼在IE6.0/IE7.0下通過(guò)，并沒(méi)有在opera和firefoxs下測(cè)試。）

    2、純CSS方法實(shí)現(xiàn)DIV高度自適應(yīng)

    CSS里代碼（IE下測(cè)試通過(guò)，但不會(huì)顯示div下邊框，即border-bottom）：

     
 
 
      
  
  
  
    1. /*左右自適應(yīng)相同高度start*/  
      2. 
  
  
  
    2. #m1,#m2  
      3. 
  
  
  
    3. {  
      4. 
  
  
  
    4. padding-bottom:32767px!important;  
      5. 
  
  
  
    5. margin-bottom:-32767px!important;  
      6. 
  
  
  
    6. }  
      7. 
  
  
  
    7. @mediaalland(min-width:0px){  
      8. 
  
  
  
    8. #m1,#m2  
      9. 
  
  
  
    9. {  
      10. 
  
  
  
    10. padding-bottom:0!important;  
      11. 
  
  
  
    11. margin-bottom:0!important;  
      12. 
  
  
  
    12. }  
      13. 
  
  
  
    13. #m1:before,#m2:before  
      14. 
  
  
  
    14. {  
      15. 
  
  
  
    15. content:'[DONOTLEAVEITISNOTREAL]';  
      16. 
  
  
  
    16. display:block;  
      17. 
  
  
  
    17. background:inherit;  
      18. 
  
  
  
    18. padding-top:32767px!important;  
      19. 
  
  
  
    19. margin-bottom:-32767px!important;  
      20. 
  
  
  
    20. height:0;  
      21. 
  
  
  
    21. }  
      22. 
  
  
  
    22. }  
      23. 
  
  
  
    23. /*左右自適應(yīng)相同高度end*/  
      24. 
  
  
  
    24.  
      25.

     3、加背景圖片實(shí)現(xiàn)DIV高度自適應(yīng)

    這個(gè)方法，很多大網(wǎng)站在使用，如163，sina等。

    XHTML代碼：

     
 
 
      
  
  
  
    1.  
      2. 
  
  
  
    2. 這是第一列
     
  • 這是第二列
    •  
    •  
  •  
  •  

    •  CSS代碼:

     
 
 
      
  
  
  
    1. #wrap{width:776px;background:url(bg.gif)repeat-y300px;}  
      2. 
  
  
  
    2. #column1{float:left;width:300px;}  
      3. 
  
  
  
    3. #column2{float:right;width:476px;}  
      4. 
  
  
  
    4. .clear{clear:both;}  
      5. 
  
  
  
    5.  
      6.

    還有其他的一些方法，但主流就是這幾種了。如果你還有關(guān)于多個(gè)div自適應(yīng)高度的好的代碼，請(qǐng)給我們留言，歡迎與我們討論。


    當(dāng)前文章：DIV高度自適應(yīng)方法匯總
    URL鏈接：http://www.dlmjj.cn/article/dpphshd.html