用CSS实现div等高
方法1：兼容IE6.7.8.9.10.FF.Chrome
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.wrap {
width: 500px;
margin: auto;
overflow: hidden;
}
.left, .right {
padding-bottom: 32767px;
margin-bottom: -32767px;
color: white;
}
.left {
background-color: #000;
width: 200px;
float: left;
height: 800px;
}
.right {
background-color: red;
width: 300px;
float: right;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
<div class="right">
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
</div>
</body>
</html>
方法2：
这个方法的优点：
代码少，简单
缺点：不兼容IE7.6
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
* {
margin:0;
padding:0;
border:0;
list-style:none;
}
.cell1, .cell2, .cell3 {
display:table-cell;
width:180px;
padding-left:10px;
background-color:#ff6a00;
border:1px solid #00ffff;
}
</style>
</head>
<body>
<div class="table">
<div class="cell1">
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
<div class="cell2">
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
<div class="cell3">
<p>aaa</p>
<p>aaa</p>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号