溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“實現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包含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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
