四種方法解決DIV高度自適應(yīng)問題
本文和大家重點討論一下解決DIV高度自適應(yīng)的方法，這里主要從四個方面來向大家介紹，相信通過本文學(xué)習(xí)你對DIV高度自適應(yīng)問題會有更加深刻的認識。
DIV高度自適應(yīng)
關(guān)于DIV高度的自適應(yīng)，一直是個讓人頭疼的問題，整理了一下以前總結(jié)的方法，僅表示我也玩過。
htmlcode:
- <div id="container">
- <dividdivid="leftSide">這邊的高度自適應(yīng)右側(cè)的高度</div>
- <dividdivid="rightSide">
- <scripttypescripttype="text/javascript">
- for(i=0;i<10;i++){
- document.write(i+'<br>');
- }
- </script>
- </div>
- </div>
可用的方法大概有以下四種：
1，用absolute設(shè)置一個足夠高的高度，在父級元素中清除溢出的部分,具體的csscode如下：
- #container{font-size:14px;width:300px;overflow:hidden;
- border:3pxsolidblue;margin:10pxauto0;
- color:#fff;position:relative;}
- #leftSide{width:100px;float:left;height:200000px;
- left:0;top:0;position:absolute;background:gray;}
- #rightSide{width:190px;float:right;
- text-align:center;background:purple;}
其實這種方法并沒有真正的實現(xiàn)左右兩個div等高，只是用了障眼法，利用container的overflow:hidden清除了左側(cè)多余的部分，以達到視覺上左右等高的目的，雖然有“白貓黑貓，逮著老鼠就是好貓”的說法，但是筆者并不著重推薦這種方法，因為給父級元素添加relative，會帶來很多不必要的麻煩，況且只能是設(shè)置absolute的一側(cè)自適應(yīng)另一側(cè)的高度，并不能讓兩側(cè)中任一側(cè)去自由去適應(yīng)另一側(cè)！
2，負外補丁和正內(nèi)補丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相結(jié)合
- #container{font-size:14px;width:300px;overflow:hidden;
- border:3pxsolidblue;margin:10pxauto0;color:#fff;}
- #leftSide{width:100px;float:left;background:gray;
- padding-bottom:9999px;margin-bottom:-9999px;}
- #rightSide{width:190px;float:right;text-align:center;
- background:purple;padding-bottom:9999px;
- margin-bottom:-9999px;}
3，利用javascript腳本實現(xiàn)動態(tài)設(shè)置高度
- <scripttypescripttype="text/javascript">
- varleft=document.getElementById('leftSide');
- varright=document.getElementById('rightSide');
- if(left.offsetHeight>=right.offsetHeight){
- right.style.height=left.offsetHeight+'px';
- }else{
- left.style.height=right.offsetHeight+'px';
- }
- </script>
事實上，這種辦法真正意義上實現(xiàn)了兩側(cè)等高，并且能讓兩側(cè)中任一側(cè)去自由去適應(yīng)另一側(cè)，但是其缺點就在于，只有當(dāng)DOM加載完成后，才有會這樣等高的效果，如果網(wǎng)速夠快，這個漏洞可以忽略不計。
4，在父級元素中填充背景
CSS code如下：
- #container{font-size:14px;width:300px;overflow:hidden;
- border:3pxsolidblue;
- margin:10pxauto0;color:#fff;
- background:url(http://www.men-ideal.com/images/unit1030.jpg)repeat-y;}
- #leftSide{width:100px;float:left;}
- #rightSide{width:190px;float:right;text-align:center}
目前，這種方法是最流行的，同樣也是一種“欺騙性”的解決辦法，不過除了多使用一張圖片之外，都可以堪稱完美，這也是筆者極力推薦的！
【編輯推薦】
- CSS元素水平居中行之有效的辦法
- CSS textarea高度自適應(yīng)問題解決方案
- CSS樣式表高效使用八大秘訣
- 五大常用Div高度自適應(yīng)的方法
- CSS技巧：3種常用方法解決div列高度自適應(yīng)
