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

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

成都創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計公司，集創(chuàng)意、互聯(lián)網(wǎng)應用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務商，主營產(chǎn)品：成都響應式網(wǎng)站建設(shè)、品牌網(wǎng)站制作、營銷型網(wǎng)站建設(shè)。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立，網(wǎng)絡(luò)互動的體驗，以及在手機等移動端的優(yōu)質(zhì)呈現(xiàn)。網(wǎng)站制作、成都網(wǎng)站制作、移動互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運營、VI設(shè)計、云產(chǎn)品.運維為核心業(yè)務。為用戶提供一站式解決方案，我們深知市場的競爭激烈，認真對待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價值服務。

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

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)點：無hacks，完全的自適應高度。

2、腳本控制高度 ..

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

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

優(yōu)點：代碼超級簡單

缺點：要確定有某一列的高度始終是相對***的，此方法比較被動。

3、margin負值父子容器高度繼承

這個方法能較好地解決列高度相同的問題。三行二列布局，主要內(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的朋友對這種方法不怎么理解，現(xiàn)Blank分析一下：

［Ａ］
［Ｂ］［Ｃ］

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

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

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

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