并列div自动等高
方法一：css控制
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>
方法二：JS控制
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
时间： 2024-08-13 18:49:17