标签：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <title>完美的DIV三行三列自适应高度布局</title> 7 <style type="text/css"> 8 body { 9 margin:0; 10 padding:0; 11 font-size:12px; 12 } 13 .header { 14 width:100%; 15 height:50px; 16 background:#EEE; 17 border-bottom:1px solid #000; 18 } 19 .colmask { 20 position:relative; 21 clear:both; 22 width:100%; 23 overflow:hidden; 24 } 25 .colright, .colmid, .colleft { 26 float:left; 27 width:100%; 28 position:relative; 29 } 30 .col1, .col2, .col3 { 31 float:left; 32 position:relative; 33 overflow:hidden; 34 } 35 .threecol { 36 background:#BBB; 37 } 38 .threecol .colmid { 39 right:20%; 40 background:#CCC; 41 } 42 .threecol .colleft { 43 right:60%; 44 background:#DDD; 45 } 46 .threecol .col1 { 47 width:58%; 48 left:101%; 49 } 50 .threecol .col2 { 51 width:18%; 52 left:23%; 53 } 54 .threecol .col3 { 55 width:18%; 56 left:85%; 57 } 58 .footer { 59 clear:both; 60 width:100%; 61 height:50px; 62 background:#EEE; 63 border-top:1px solid #000; 64 } 65 </style> 66 </head> 67 <body> 68 <div class="header"> 这里是头部 </div> 69 <div class="colmask threecol"> 70 <div class="colmid"> 71 <div class="colleft"> 72 <div class="col1"> 73 <p>这里是中间</p> 74 <p>这里是中间</p> 75 <p>这里是中间</p> 76 <p>这里是中间</p> 77 <p>这里是中间</p> 78 <p>这里是中间</p> 79 <p>这里是中间</p> 80 81 </div> 82 <div class="col2"> 这里是左栏 </div> 83 <div class="col3"> 84 <p>这里是右栏</p> 85 <p>这里是右栏</p> 86 <p>这里是右栏</p> 87 <p>这里是右栏</p> 88 </div> 89 </div> 90 </div> 91 </div> 92 <div class="footer"> 这里是底部 </div> 93 </body> 94 </html>
function SetSameHeight(obj1,obj2)
{
var h1 = $(obj1).outerHeight(); //获取对象1的高度
var h2 = $(obj2).outerHeight(); //获取对象2高度
var mh = Math.max( h1, h2); //比较一下
$(obj1).height(mh);
$(obj2).height(mh);
}
在页面用调用：
jQuery(document).ready(function($) {
SetSameHeight(".left",".line");
SetSameHeight(".right_main",".line");//如果有３个div 就加这一行代码，再适应一次．
}
参考博客：http://www.jianshu.com/p/93e61ec8f354
标签：
原文地址：http://www.cnblogs.com/love9happy/p/4739010.html
