CSS技巧：3種常用方法解決div列高度自適應(yīng)
本文向大家介紹一下解決div列高度自適的3種常用方法，分別是利用“clear:both”背景填充，使用腳本控制高度和margin負(fù)值父子容器高度繼承三種。
CSS技巧：解決div列高度自適的3種常用方法
解決div列高度自適的方法有很多種，這里介紹三種最常用的方法給大家（下面所有例子以父main，子divleft、divright為例）。
1、利用“clear:both”背景填充（推薦?。。。?/strong>
這是使用最廣泛的一種做法，我一直都用此方法解決div列高度自適問(wèn)題。三行二列布局，主要內(nèi)容在右邊，網(wǎng)頁(yè)寬度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)：無(wú)hacks，完全的自適應(yīng)高度。#p#
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è)方法能較好地解決列高度相同的問(wèn)題。三行二列布局，主要內(nèi)容在左邊，網(wǎng)頁(yè)寬度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的背景。這樣無(wú)論b***或者c***都將顯示div列高度相同。
優(yōu)點(diǎn)：兼有***種方法的優(yōu)點(diǎn)，并且比***種方法的代碼稍微簡(jiǎn)潔。
缺點(diǎn)：整體結(jié)構(gòu)只能左對(duì)齊。
【編輯推薦】
- DIV+CSS布局注意要點(diǎn)
- IE6.0對(duì)padding的解讀分析
- DIV+CSS網(wǎng)頁(yè)錯(cuò)位診斷和解決方法
- Float構(gòu)建三欄DIV CSS網(wǎng)頁(yè)布局
- 技術(shù)分享 如何使用CSS控制超鏈接文字樣式
