1.写出基本的html结构和css样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV高度自适应</title>
<style>
.container{
display:table;
width:900px;
min-height:300px;
margin: 100px auto;
background-color:#ccc;
}
.col{
display:table-cell;
text-align:center;
width:300px;
top:0;
bottom:0;
font-size:50px;
}
.col1{
background-color:#369;
}
.col2{
background-color:#963;
}
.col3{
background-color:#936;
}
</style>
</head>
<body>
<div class="container">
<div class="col col1">1</div>
<div class="col col2">2</div>
<div class="col col3">3</div>
</div>
</body>
</html>
当1,2,3中任意一个高度变化的时候，会影响其他两个，先在1中添加几个p标签做一下实验来证实
<div class="col col1">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
这个关键在于将container的display设置为table，将col的display设置为table-cell，就可以实现向table里面各个td高度一致的的效果，方法简单有效，比我以前使用的要好得多
点击查看demo http://codepen.io/Ritr/pen/MKGMog