padding-bottom，margin-bottom，overflow实现高度自适应

最新推荐文章于 2022-07-14 16:03:07 发布

weixin_30644369

最新推荐文章于 2022-07-14 16:03:07 发布

阅读量166

点赞数

原文链接：http://www.cnblogs.com/cobby/archive/2012/05/10/2494140.html

版权

如下图，右侧高度自适应

DOM结构：

把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">