使用display:table使两栏布局高度相等

两栏布局大家应该经常用了，但是遇到坑爹的要两栏的高度对齐的话要怎么办呢？

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title>Examples</title>
 7 <style type="text/css">
 8     *{
 9         margin:0;
10         padding:0;
11         border: 0 none;
12     }
13     #main{
14         width:100%;
15     }
16     div.sideBar{
17         width:70%;
18         height:100%;
19         background:#CD2020;
20         float:left;
21     }
22     div.content{
23         width:28%;
24         background:#2054CD;
25         height:100%;
26         float:right;
27     }
28     div.clear{
29         clear: both;
30         width:100%;
31         height:1px;
32     }
33 </style>
34 <link href="" rel="stylesheet">
35 </head>
36 <body>
37     <div id="main">
38         <div class="sideBar">
39             <p>这是测试</p>
40             <p>这是测试</p>
41             <p>这是测试</p>
42             <p>这是测试</p>
43             <p>这是测试</p>
44             <p>这是测试</p>
45             <p>这是测试</p>
46             <p>这是测试</p>
47             <p>这是测试</p>
48             <p>这是测试</p>
49             <p>这是测试</p>
50             <p>这是测试</p>
51         </div>
52         <div class="content">
53             <p>这是测试</p>
54             <p>这是测试</p>
55             <p>这是测试</p>
56             <p>这是测试</p>
57         </div>
58         <div class="clear"></div>
59     </div>
60 </body>
61 </html>

就像这样的，左边的高度和右边的高度明显不一样，但是我想要给右边的一点颜色，然后让它看起来"cool"一点怎么办呢？

以前想的是用JS获取左边元素高度然后设置右边元素高度为相同值，现在有display:table这个东西就很好解决了。

还是那个基本的思想，行为和样式要分离的思想。所以我们用display:block解决它吧。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title>Examples</title>
 7 <style type="text/css">
 8     *{
 9         margin:0;
10         padding:0;
11         border: 0 none;
12     }
13     #main{
14         width:100%;
15         display: table;
16     }
17     div.sideBar{
18         width:70%;
19         height:100%;
20         background:#CD2020;
21         display: table-cell;
22     }
23     div.content{
24         width:28%;
25         background:#2054CD;
26         height:100%;
27         display: table-cell;
28     }
29     div.clear{
30         clear: both;
31         width:100%;
32         height:1px;
33     }
34 </style>
35 <link href="" rel="stylesheet">
36 </head>
37 <body>
38     <div id="main">
39         <div class="sideBar">
40             <p>这是测试</p>
41             <p>这是测试</p>
42             <p>这是测试</p>
43             <p>这是测试</p>
44             <p>这是测试</p>
45             <p>这是测试</p>
46             <p>这是测试</p>
47             <p>这是测试</p>
48             <p>这是测试</p>
49             <p>这是测试</p>
50             <p>这是测试</p>
51             <p>这是测试</p>
52         </div>
53         <div class="content">
54             <p>这是测试</p>
55             <p>这是测试</p>
56             <p>这是测试</p>
57             <p>这是测试</p>
58         </div>
60     </div>
61 </body>
62 </html>

是的，我们连float都不用加就可以轻松实现等高度的两栏布局了。虽然有点倒退回表格布局的嫌疑 ——！！。

但是问题也来了，IE8+才支持display:table这个属性--!!

不过所幸现在IE6的市场份额越来越少了，IE8+的市场份额也越来越多了，或许这种方式的布局后面会比较流行，原因就是简单粗暴。