您好,登錄后才能下訂單哦!
這篇文章主要介紹“實現CSS中div列高度自適的3種方式”,在日常操作中,相信很多人在實現CSS中div列高度自適的3種方式問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”實現CSS中div列高度自適的3種方式”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
CSS技巧:解決div列高度自適的3種常用方法
解決div列高度自適的方法有很多種,這里介紹三種最常用的方法給大家(下面所有例子以父main,子divleft、divright為例)。
1、利用“clear:both”背景填充
這是使用最廣泛的一種做法,我一直都用此方法解決div列高度自適問題。三行二列布局,主要內容在右邊,網頁寬度780px,左列240px,右列540px。
CSS代碼:
#main{ width:780px; margin:0; background:url(bg.gif)#FFFFFFrepeat-yleft; text-align:left; } #divleft{ float:left; width:240px; } #divright{ float:right; width:540px; } .clear{ border-top:1pxsolidtransparent!important; margin-top:-1px!important; border-top:0; margin-top:0; clear:both; visibility:hidden; }
html代碼:
<dividdivid="main"> <dividdivid="divleft"></div> <dividdivid="divright"></div> <divclassdivclass="clear"></div> </div>
優點:無hacks,完全的自適應高度。
2、腳本控制DIV列高度
在<body>中加入如下代碼(假設divright的高度相對***):
<scriptlanguagescriptlanguage="javascript"> document.getElementById"divleft") .style.height=document.getElementById"divright") .scrollHeight+"px" </script>
優點:代碼超級簡單
缺點:要確定有某一列的高度始終是相對***的,此方法比較被動。
3、margin負值父子容器高度繼承
這個方法能較好地解決DIV列高度相同的問題。三行二列布局,主要內容在左邊,網頁寬度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-240px00; background:#F0F0F0; }
html代碼:
<dividdivid="main"> <dividdivid="divleft"> <dividdivid="divright"></div> </div> </div>
或許剛接觸的WebStandards的朋友對這種方法不怎么理解,現Blank分析一下:
[A]
[B][C]
上結構中a包含c,c包含b。當b的高度為***時,那么a和c將繼承b的高度,如果a和b位置重合,將顯示b的背景;而當c的高度***時,那么a繼承將繼承c的高度,如果a和b位置重合,將顯示a的背景。這樣無論b***或者c***都將顯示div列高度相同。
優點:兼有***種方法的優點,并且比***種方法的代碼稍微簡潔。
缺點:整體結構只能左對齊。
到此,關于“實現CSS中div列高度自適的3種方式”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注億速云網站,小編會繼續努力為大家帶來更多實用的文章!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。