神一樣的布局——等高布局 - diligenceday－IT工程師數位筆記本

文章出處

copyFrom====〉
http://www.cnblogs.com/2050/archive/2012/07/31/2616460.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自適應布局</title>
<style>
body{ padding:0; margin:0; color:#f00;}
.container{ margin:0 auto; width:600px; border:3px solid #00C;
    overflow:hidden; /*這個超出隱藏的聲明在IE6里不寫也是可以的*/
}
.left{ float:left; width:150px; background:#B0B0B0;
    padding-bottom:2000px;
    margin-bottom:-2000px;
}
.right{ float:left; width:450px; background:#6CC;
   padding-bottom:2000px;
   margin-bottom:-2000px;
}
</style>
</head>
<body>
<div class="container">
	<div class="left">我是left</div>
    <div class="right">我是right<br><br><br>現在我的高度比left高，但left用它的padding-bottom補償了這部分高度</div>
    <div style="clear:both"></div>
</div>
</body>
</html>
//PS因為我們padding不可能使用負的，所以padding-bottom:為正，margin-bottom為負的

文章列表