CSS中解決div列高度自適應(yīng)的3種常用方法分別是什么

CSS中解決div列高度自適應(yīng)的3種常用方法分別是什么，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

向大家介紹一下解決div列高度自適的3種常用方法，分別是利用“clear:both”背景填充，使用腳本控制高度和margin負(fù)值父子容器高度繼承三種。

CSS技巧：解決div列高度自適的3種常用方法

解決div列高度自適的方法有很多種，這里介紹三種最常用的方法給大家（下面所有例子以父main，子divleft、divright為例）。

1、利用“clear:both”背景填充（推薦！?。。?/strong>

這是使用最廣泛的一種做法，我一直都用此方法解決div列高度自適問題。三行二列布局，主要內(nèi)容在右邊，網(wǎng)頁寬度780px,左列240px,右列540px。

CSS代碼：

#main{  width: 780px;  margin: 0;  background: url(bg.gif) #FFFFFF repeat-y left;  text-align: left;  }    #divleft{  float: left;  width: 240px;  }    #divright{  float: right;  width: 540px;  }    .clear{  border-top:1px solid transparent !important;  margin-top:-1px !important;  border-top:0;  margin-top:0;  clear:both;  visibility:hidden;  }

html代碼：

<div id="main"> <div id="divleft">div> <div id="divright">div> <div class="clear">div> div>

優(yōu)點(diǎn)：無hacks，完全的自適應(yīng)高度。

2、腳本控制高度 ..

在中加入如下代碼（假設(shè)divright的高度相對(duì)***）：

<script language="javascript"> document.getElementById"divleft").style.height =document.getElementById"divright").scrollHeight "px"  script>

優(yōu)點(diǎn)：代碼超級(jí)簡(jiǎn)單

缺點(diǎn)：要確定有某一列的高度始終是相對(duì)***的，此方法比較被動(dòng)。

3、margin負(fù)值父子容器高度繼承

這個(gè)方法能較好地解決列高度相同的問題。三行二列布局，主要內(nèi)容在左邊，網(wǎng)頁寬度780px,左列540px,右列240px。

CSS代碼：

#main{  width: 540px;  float:left;  background:#FFFFFF;  text-align:left;  }   #divleft{  width: 540px;  float: left;  position:relative;  margin-left:-540px;  }   #divright{  width: 240px;  float: right;  position:relative;  margin: 0 -240px 0 0;  background: #F0F0F0;  }

html代碼：

<div id="main"> <div id="divleft"> <div id="divright">div> div> !   div>

或許剛接觸的Web Standards的朋友對(duì)這種方法不怎么理解，現(xiàn)Blank分析一下：

［Ａ］
［Ｂ］［Ｃ］

上結(jié)構(gòu)中a包含c，c包含b。當(dāng)b的高度為***時(shí)，那么a和c將繼承b的高度，如果a和b位置重合，將顯示b的背景；而當(dāng)c的高度***時(shí)，那么a繼承將繼承c的高度，如果a和b位置重合，將顯示a的背景。這樣無論b***或者c***都將顯示div列高度相同。

優(yōu)點(diǎn)：兼有***種方法的優(yōu)點(diǎn)，并且比***種方法的代碼稍微簡(jiǎn)潔。

缺點(diǎn)：整體結(jié)構(gòu)只能左對(duì)齊。

關(guān)于CSS中解決div列高度自適應(yīng)的3種常用方法分別是什么問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。