泉州金龙街道电脑培训班-padding-bottom，margin-bottom，overflow实现高度自适应-福建百-技术支持
泉州金龙街道电脑培训班-padding-bottom，margin-bottom，overflow实现高度自适应-福建百科教育网
如下图，右侧高度自适应
DOM结构：
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
把left，right的背景设置为最大：padding-bottom: 5000px; margin-bottom: -5000px;在设置一个背景即可看到效果
然后通过设置main的 overflow:hidden 隐藏不需要的区域
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>CSS等高布局</title>
<style type="text/css">
body { margin: 0; padding: 0; font:14px/1.6em Arial, Helvetica, 宋体,sans-serif; text-align: cnter;}
.main {
width: 800px;
margin: 0 auto;
margin-top: 20px;
color: #FFF;
background: #333;
overflow: hidden;
}
.left {
float: left;
width: 550px;
background: #F00;
border: 1px solid #666;
padding-bottom: 5000px;
margin-bottom: -5000px;
}
.right {
float: right;
width: 240px;
background: #090;
border: 1px solid #666;
padding-bottom: 5000px;
margin-bottom: -5000px;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
<p>我非常高</p><p>我就是很高</p>
<p>我很高</p><p>我也很高</p>
<p>我非常高</p><p>我就是很高</p>
<p>我很高</p><p>我也很高</p>
<p>我非常高</p><p>我就是很高</p>
<p>我很高</p><p>我也很高</p>
<p>我非常高</p><p>我就是很高</p>
</div>
<div class="right">
<p>我会和左边一样高吗？</p>
<p>我和左边一样高哦！</p>
</div>
</div>
</body>
</html>
