div-css-两列高度自适应

最新推荐文章于 2021-08-04 00:51:51 发布

iteye_6992

最新推荐文章于 2021-08-04 00:51:51 发布

阅读量162

点赞数

分类专栏： div-css 文章标签： div-css

div-css 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了使用DIV+CSS布局实现左右两列自适应高度的技术，通过设置外层元素的overflow属性和内层元素的margin-bottom、padding-bottom，解决了高度不匹配的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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=gb2312" />
<title>DIV+CSS左右两列自适应高度的方法-HTMer</title>
<style type="text/css">
/*
外层一定要有overflow:hidden;
左右两列，哪列短，其样式就需要加上margin-bottom:-9999px;padding-bottom:9999px;

给外层元素加上：position：relative；（在ie6,7,8中，当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。给父元素加上position：relative）
*/
.main{width:502px;overflow:hidden; border-bottom:1px solid #000; border-top:2px solid #000; position:relative;}
.left{width:100px;background-color:#0CC;float:left; border-left:1px solid #000;}
.right{width:400px;background-color:#F00;float:left;margin-bottom:-9999px;padding-bottom:9999px; border-right:1px solid #000}
</style>
</head>
<body>
<div class="main">
<div class="left">左侧内容1<br />左侧内容2<br />左侧内容3左侧内容1<br />左侧内容2<br />左侧内容31</div>
<div class="right">右侧内容1<br />右侧内容2<br />右侧内容3</div>
</div>
</body>
</html>