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

最新推荐文章于 2022-05-15 16:01:45 发布

weixin_30644369

最新推荐文章于 2022-05-15 16:01:45 发布

阅读量151

点赞数

原文链接：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">

<p>我非常高</p><p>我就是很高</p>

<p>我非常高</p><p>我就是很高</p>

<p>我非常高</p><p>我就是很高</p>

<p>我非常高</p><p>我就是很高</p>
</div>

<p>我会和左边一样高吗？</p>

<p>我和左边一样高哦！</p>

</div>

</body>

</html>

转载于:https://www.cnblogs.com/cobby/archive/2012/05/10/2494140.html

weixin_30644369

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
padding-bottom，margin-bottom，overflow实现高度自适应

如下图，右侧高度自适应DOM结构：<div id="main"> <div id="left"></div> <div id="right"></div></div>把left，right的背景设置为最大：padding-bottom: 5000px;m...
复制链接

扫一扫