css两列等⾼，多种⽅法实现div两列等⾼（收集整理）
HTML⾻架
<divid="header">头部div>
<divid="container">
<divclass="mainbox">主内容区域div>
<divclass="sidebox">侧边栏div>
div>
<divid="footer">页脚div>
1.背景模拟(使⽤背景图⽚实现等⾼)：
背景模拟主要依靠⼀张图⽚，然后将其平铺，使页⾯在视觉上，产⽣等⾼效果，如图
背景模拟实现很简单，直接利⽤了background-repeat属性，使背景图⽚以Y轴⽅向重复。
图⽚：
css： background-repeat:repeat-y;
关于背景图⽚，这个需更具你的实际项⽬需求，值得注意的是背景图⽚切图时必须以两列的形式，否这达不到等⾼效果。
*{margin:0;padding:0;}#header,#footer{width:960px;height:30px;background-
color:#6CF;}#container{width:960px;background:url(images/bg.png) repeat-y 0 0;
}.mainbox{float:left;width:650px;}.sidebox{float:right;width:280px;}.mainbox,.sidebox{padding:0
5px;color:#FF0000;}#container:after{display:block;visibility:hidden;font-size:0;line-height:0;clear:both;content:"";}
2.负边距实现
提 到负边距，在学习盒⼦模型时，相信⼤家都学过，也了解过。在这我就不阐述了, 负边距实现等⾼主要利⽤了padding-bottom 和margin-bottom两个属性，⽗元素container层内添加了overflow属性，其中margin为负值，padding为正值。如图
*{margin:0;padding:0;}#header,#footer{width:960px;height:30px;background-
color:#E8E8E8;}#container{width:960px;overflow:hidden;/重点！将⽗级元素多余部分切除掉/ margin:10px
0;}.mainbox{float:left;width:650px;background-color:#333333;}.sidebox{float:right;width:280px;background-
color:#AAAAAA;}.mainbox,.sidebox{padding:0 5px;color:#FF0000;margin-bottom:-9999px;padding-
bottom:9999px;}#container:after{display:block;visibility:hidden;font-size:0;line-height:0;clear:both;content:"";}
3.使⽤border实现等⾼
使⽤边框(border)实现等⾼，其实也就是” 使⽤负边距实现等⾼”的⼀个改版，也是⼀个投机取巧的⽅法。
*{margin:0;padding:0;}#header,#footer{width:970px;height:30px;background-
color:#9CF;}#container{position:relative;width:970px;margin:10px 0;}.mainbox{width:650px;background-color:#FC9;border-right:320px solid #F63;}.sidebox{width:320px;position:absolute;top:0;right:0;}
4。使⽤JavaScript实现等⾼
使⽤JavaScript实现等⾼很简单，使⽤getElementById⽅法获取两个元素的的⾼度值，判断两个元素的⾼度，最后负值。
总结：凡事有利必有害，使⽤CSS实现等⾼也是如此，不过，最后还是推荐使⽤JavaScript⽅式实现等⾼，毕竟CSS样式主要作⽤是修饰页⾯
5.JQuery 实现两列等⾼并⾃适应⾼度
原理就是取得左右两边的⾼度，然后判断这个值，把⼤的值赋给⼩的就⾏了。代码：
$(document).ready(function() {var _leftheight = $(".left").height();var _rightheight = $(".right").height();if (_leftheight
>_rightheight) {
$(".right").height(_leftheight);
}else{
$(".left").height(_rightheight);
}
});
padding是外边距还是内边距6. 扩展：CSS 多列 多模块 等⾼ 布局
原理是事先通过正内边距来使其拥有⾜够⾼的布局控件，然后通过负外边距来使得其的位置不变。通过给⽗元素溢出隐藏，我们可以隐藏掉事先占据的⾜够⾼的空间。由两列实际的内容⾼度来决定整个⽗元素的⾼度，从⽽实现了等⾼。
习
惯思维上，我们都是多列等⾼，然后把这⼏列都浮动。现在我们变换⼀下思路，直接使⽤不浮动的⼀列的时候，情况会怎样，我们发现，当⼀列不浮动搭配正
内边距加负外边距，⽗元素溢出隐藏，它的⾼度跟还是由内在元素来决定，但是通过web developer
toolbar我们可以看到它实际上已经占据了⾜够的⾼度空间同样的道理，定位也遵循这个规则。我们可以把两侧边框使⽤绝对定位来固定到两侧，因为绝对定位是不占布局空间的，那么我们需要⼀个⽂档流来对⽗元素进⾏占位。基本上⽗元素有多⾼，就显⽰绝对定位的元素多少内容，实际上这也就实现了⼀个等⾼。
知道了这个表现原理，那么上⽂的布局也就不难了，只需要把每列最后⼀个模块再进⾏正内边距加负外边距来进⾏空间占位就可以实现了！⾄于下边框，实际上另外⼀个容器从底下进⾏拼装实现的~！
View Code
参考：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。