標籤：bar eee body 需要 order 使用方法 檔案中 瀏覽器安全色 css布局
布局方案
等高布局有幾種不同的方法，但目前為止我認為瀏覽器安全色最好最簡便的應該是padding補償法。首先把列的padding-bottom設為一個足夠大的值，再把列的margin-bottom設一個與前面的padding-bottom的正值相抵消的負值，父容器設定超出隱藏，這樣子父容器的高度就還是它裡面的列沒有設定padding-bottom時的高度，當它裡面的任一列高度增加了，則父容器的高度被撐到它裡面最高那列的高度，其他比這列矮的列則會用它們的padding-bottom來補償這部分高度差。因為背景是可以用在padding佔用的空間裡的，而且邊框也是跟隨padding變化的，所以就成功的完成了一個障眼法。
代碼
先來看下沒有等高布局的情況
效果：
然後我們應用等高布局：
效果如下：
在進行具體操作的時候，padding-bottom的值大小取決於你的項目的實際情況，如果不確定，設大一點也無所謂。
最終的代碼：
| 12345678910111213141516171819202122232425262728 | <!DOCTYPE html><html><head><meta charset="utf-8" /><title>高度調適型配置</title><style>body{ padding:0; margin:0; color:#f00;}.container{ margin:0 auto; width:600px; border:3px solid #00C; overflow:hidden; /*這個超出隱藏的聲明在IE6裡不寫也是可以的*/}.left{ float:left; width:150px; background:#B0B0B0; padding-bottom:2000px; margin-bottom:-2000px;}.right{ float:left; width:450px; background:#6CC; padding-bottom:2000px; margin-bottom:-2000px;}</style></head><body><div class="container"> <div class="left">我是left</div> <div class="right">我是right<br><br><br>現在我的高度比left高，但left用它的padding-bottom補償了這部分高度</div> <div style="clear:both"></div></div></body></html> |
二. 利用表格嵌套
這種方法就是在div中嵌套一個表格，因為表格是可以左右自動等高的，所以當一側的內容增多時，兩側都會自動等高。
其實只要用表格版面配置做過頁面，這個方法基本上大家都會，就是在div中巢狀表格格。
原則上，使用div布局應盡量減少表格出現，但為了達到某些效果，稍稍的使用一些也是可以的，況且國外有些較有名的網站也使用了這種方法。下面講解具體方法。
Html代碼：
[html]<div id="wrap"> <table border="0" cellpadding="0" cellspacing="0" id="table_layout"> <tr> <td id="left_b"> <div class="box"> <p></p><p> </p> <p></p><p> </p> </div> <div class="box"> <p></p><p> </p> <p><br/><br/><br/><br/></p> </div> </td> <td id="mid_b"> </td> <td id="right_b"> <div class="box"><br/><br/><br/></div> </td> </tr> </table> </div>
CSS代碼：
[html]* { margin:0; padding:0; } #wrap { width:950px; height:100%; clear:both; margin:0 auto; background:#FFF; color:#FFF; } #table_layout { width:950px; } #left_b { width:190px; background:#09C; } #right_b { width:750px; background:#09C; } #mid_b { width:10px; } .box { clear:both; height:100%; }
三、
利用JavaScript指令碼
Javascript是最好的Html輔助程式，尤其是前端介面的開發，在自動等高方面，也有專業的指令碼。
網上使div等高的Javascript指令碼很多，但有些僅僅針對IE瀏覽器可用，對Firefox、Opera等瀏覽器無效，所以在選擇指令碼的時候應該特別注意指令碼的跨瀏覽器安全色性。
下面給大家介紹一個從網上找來的Javascript指令碼，並列出使用方法。
Html代碼：
<div class="div_top"> 這是頂部的div </div> <div id="Div1" class="div_left"> 左部div <br /> <br/><br /><br /> <br /><br /> <br /><br /> </div> <div id="Div2" class="div_right"> 右部div <br/> <br/> <br/> </div> <div class="div_bottom"> 這是底部的<br/> </div>
CSS代碼：
* { margin:0px; padding:0px; } .div_top{ width:100%; background:#FCC; } .div_bottom{ width:100%; background:#FFC; } .div_left{ position:absolute; width:200px; background:#FE2; } .div_right{ margin-left:200px; background:#0CF; }
Javascript代碼：
<script> function P7_colH(){ var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa; if(dA&&dA.length){ for(i=0;i<dA.length;i++){ dA[i].style.height=‘auto‘; } for(i=0;i<dA.length;i++){ oh=dA[i].offsetHeight;h=(oh>h)?oh:h; } for(i=0;i<dA.length;i++){ if(an){ dA[i].style.height=h+‘px‘; } else{ P7_eqA(dA[i].id,dA[i].offsetHeight,h); } } if(an){ for(i=0;i<dA.length;i++){ hh=dA[i].offsetHeight; if(hh>h){ dA[i].style.height=(h-(hh-h))+‘px‘; } } }else{ document.p7eqa=1; } document.p7eqth=document.body.offsetHeight; document.p7eqtw=document.body.offsetWidth; } } function P7_eqT(){ if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){ P7_colH(); } } function P7_equalCols(){ if(document.getElementById){ document.p7eqc=new Array; for(i=0;i<arguments.length;i++){ document.p7eqc[i]=document.getElementById(arguments[i]); } setInterval("P7_eqT()",10); } } function P7_eqA(el,h,ht){ var sp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height); ch=(ch)?ch:h; var ad=oh-ch,adT=ht-ad; nh+=inc; nh=(nh>adT)?adT:nh; g.style.height=nh+‘px‘; oh=g.offsetHeight; if(oh>ht){ nh=(ht-(oh-ht));g.style.height=nh+‘px‘; } if(nh<adT){ setTimeout("P7_eqA(‘"+el+"‘,"+nh+","+ht+")",sp); } } </script>
以上Html、CSS、Javascript三部分代碼齊備後，還需要在網頁的body標籤處加入一行代碼onload="P7_equalCols(‘Div1‘,‘Div2‘)"，
變成<body onload="P7_equalCols(‘Div1‘,‘Div2‘)">, 其中Div1對應的是左側div的id，Div2對應的是右側的id
如果是三列布局，可以再自己增加內容，變成 <body onload="P7_equalCols(‘Div1‘,‘Div2‘,‘Div3‘)">
將以上代碼複製到網頁檔案中，即可實現div自動等高的效果了。
上面的代碼是將表格嵌套在wrap這個div中，在這個table中又插入其它div，這樣就可以讓左右兩列達到自動等高的效果。
等高DEMO
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css"> *{margin: 0;padding: 0;} #container { overflow: hidden; } #left { background: #ccc; float: left; width: 200px; margin-bottom: -99999px; padding-bottom: 99999px; } #content { background: #eee; margin-left: 200px;/*==此值等於左側邊欄的寬度值==*/ margin-bottom: -99999px; padding-bottom: 99999px; } #left, #content { min-height: 200px; height: auto !important; height: 200px; }</style></head><body><div id="container"><div id="left" class="aside">Left Sidebar</div><div id="content" class="section">Main Content</div></div></body></html>
CSS布局奇淫技巧之-多列等高
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
