如何发布网络小说,完美世界有声小说全集

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

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

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

我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(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è)計(jì)儼然已成網(wǎng)頁設(shè)計(jì)界的標(biāo)準(zhǔn)了。這種設(shè)計(jì)的好處大家都是知道的，但有些小問題確實(shí)很棘手，例如令人頭痛的“DIV高度自適應(yīng)”問題。

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

1、JS法

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

 
 
 
  
  
   
  
  
  
  
  
  
float:left;border:1pxsolid#265492;">left

background:#376037;">

right

2、背景圖填充法

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

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

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

 
 
 
  
  
   
  
  
  第一列　左邊正文

第二列　右邊

字字

第三列　中間圖片

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

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

3、補(bǔ)丁大法

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

要點(diǎn)：

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

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

代碼如下：

 
 
 
  
  
   
  
  
   
  
  
   
  
  
  Copterfly'sBlog 
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
  
  
  
  
background:#777;">Left

新聞中心

其他資訊