多种方法实现div两列等高（收集整理）
HTML骨架
<div id="header">头部</div>
<div id ="container">
<div class="mainbox">主内容区域</div>
<div class="sidebox">侧边栏</div>
</div>
<div id="footer">页脚</div>
1.背景模拟（使用背景图片实现等高）：
背景模拟主要依靠一张图片，然后将其平铺，使页面在视觉上，产生等高效果，如图
背景模拟实现很简单，直接利用了background-repeat属性,使背景图片以Y轴方向重复。
图片： 
css： background-repeat:repeat-y;
关于背景图片，这个需更具你的实际项目需求，值得注意的是背景图片切图时必须以两列的形式，否这达不到等高效果。
*{ margin:; padding:;}
#header,#footer{ width:960px;/*设置头部，页脚宽度*/ height:30px;/*设置头部，页脚高度*/ background-color:#6CF;/*设置头部，页脚背景颜色*/}
#container{ width:960px;/*设置元素宽度*/ background:url(images/bg.png) repeat-y 0 0; /*将背景图片以y轴重复*/}
.mainbox{ float:left;/*元素左浮动*/ width:650px;/*元素宽度*/}
.sidebox{ float:right;/*元素右浮动*/ width:280px;/*元素宽度*/}.mainbox,.sidebox{ padding:0 5px; color:#FF0000;}/*设置mainbox,sidebox共同属性*/
#container:after{ display:block; visibility:hidden; font-size:; line-height:; clear:both; content:"";}/*清楚浮动*/
2.负边距实现
提 到负边距，在学习盒子模型时，相信大家都学过，也了解过。在这我就不阐述了, 负边距实现等高主要利用了padding-bottom 和 margin-bottom两个属性，父元素container层内添加了overflow属性,其中margin为负值，padding为正值。如图
*{ margin:; padding:;}
#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:; line-height:; clear:both; content:"";}
3.使用border实现等高
使用边框(border)实现等高，其实也就是” 使用负边距实现等高”的一个改版，也是一个投机取巧的方法。
*{ margin:; padding:;}
#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;/*设置左边框宽度为320px像素，同等于sidebox的宽度*/}
.sidebox{ width:320px; position:absolute; top:; right:;/*使元素靠右*/}
4。使用JavaScript实现等高
使用JavaScript实现等高很简单，使用getElementById方法获取两个元素的的高度值，判断两个元素的高度，最后负值。
<script type="text/javascript">
mh = document.getElementById('mainbox');sh = document.getElementById('sidebox');
if(mh.clientHeight < sh.clientHeight){
mh.style.height = sh .clientHeight + "px";
}else{
sh.style.height = mh.clientHeight + "px";
}
</script>
总结：凡事有利必有害，使用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);
}
});
6. 扩展：CSS 多列 多模块 等高 布局
原理是事先通过正内边距来使其拥有足够高的布局控件，然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏，我们可以隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度，从而实现了等高。
习
惯思维上，我们都是多列等高，然后把这几列都浮动。现在我们变换一下思路，直接使用不浮动的一列的时候，情况会怎样，我们发现，当一列不浮动搭配正
内边距加负外边距，父元素溢出隐藏，它的高度跟还是由内在元素来决定，但是通过web developer
toolbar我们可以看到它实际上已经占据了足够的高度空间同样的道理，定位也遵循这个规则。我们可以把两侧边框使用绝对定位来固定到两侧，因为绝对定位是不占布局空间的，那么我们需要一个文档流来对父元素进行占位。基本上父元素有多高，就显示绝对定位的元素多少内容，实际上这也就实现了一个等高。
知道了这个表现原理，那么上文的布局也就不难了，只需要把每列最后一个模块再进行正内边距加负外边距来进行空间占位就可以实现了！至于下边框，实际上另外一个容器从底下进行拼装实现的~！
<!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=utf-8" />
<title>无标题 1</title>
<style type="text/css">
* {margin: 0; padding: 0;}
body {margin:30px;font:14px/1.6em Verdana,Lucida, Arial, Helvetica, 宋体,sans-serif; }
.main {overflow: hidden; width:800px; margin: 0 auto;}
.left {float: left; width: 250px; overflow: hidden; }
.center {float:left; margin-left:5px; width:295px; }
.right {float: right;width: 245px; overflow: hidden;}
.bor_top { height:1px; background:#FB9D51;overflow:hidden; }
.equal {padding-bottom: 1000px; margin-bottom: -1000px;}
.box {background: #F5E2AF; border: 1px #FB9D51 solid; padding-left:10px;padding-right:10px;}
.mt5 {margin-top: 5px;}
</style>
</head> <body>
<div class="main">
<div class="left equal">
<div class="box"><p>你相信这个左右等高的布局是纯的CSS写的吗？</p></div>
<div class="box mt5"><p>测试一下</p></div>
<div class="box mt5"><p>测试一下</p></div>
<div class="equal mt5 box">
<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>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
</div>
</div>
<div class="center equal">
<div class="box"><p>不由得你不信，这个的确是纯CSS写的</p></div>
<div class="box mt5"><p>测试一下</p></div>
<div class="box mt5"><p>测试一下</p></div>
<div class="equal mt5 box">
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
</div>
</div>
<div class="equal right">
<div class="box">
<p>测试一下</p>
<p>测试一下</p>
</div>
<div class="box mt5">
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
</div>
<div class="box mt5">
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
</div>
<div class="equal mt5 box">
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
</div>
</div>
</div>
<div class="main">
<div class="left bor_top"></div>
<div class="center bor_top"></div>
<div class="right bor_top"></div>
</div>
</body> </html>
参考：
- http://hi.baidu.com/mengqing723/item/726c87a43d6410d95bf19131
- JQuery 实现两列等高并自适应高度
- http://hi.baidu.com/setcookie/item/2d990eb512f7f074254b0933
多种方法实现div两列等高（收集整理）的更多相关文章
- css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- wpf ListBox,item两列不等高。
业务有这样的需求,类似瀑布流.内容两列不等高展示. 只需要继承panel,重写MeasureOverride和ArrangeOverride方法就行了. 很简单,内容都在代码里. using Syst ...
- JQuery 实现两列等高并自适应高度
想要使用 JQuery 实现两列等高并自适应高度,其实也很简单,原理就是取得左右两边的高度,然后判断这个值,把大的值赋给小的就行了.看代码: $(document).ready(function() ...
- div两栏等高布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 纯css实现div三列等高布局的最简单方法简化版/也可以多列
使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...
- 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高
代码: 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...
- css两列等高布局
布局方案 等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法.首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个 ...
- 纯css实现两列等高
<!doctype html> <html> <head> <meta /> <title>Title</title> < ...
- div 两列布局，左侧固定宽度px，右侧自适应宽度，满屏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
随机推荐
- github贡献代码步骤
1.在github上fork项目.fork:在自己github仓库创建一个与该项目内容一样的同名项目,你可以在这个新项目里自由的修改内容. 2.在本地电脑git自己github仓库项目下来.如果直接g ...
- Java：几个正则式应用（检查汉字、日期、EMAIL、手机号码的合法性，替换字符串等）
1. 检查输入是否为合法汉字 /** * 判断输入字符是否为有效汉字 * @param str 字符 * @return 是否合法汉字 */ public static boolean isValid ...
- Mac升级bash到最新版本
mac自带的bash为3.2版本,而最新的bash是4.9,需要升级了,才能支持关联数组等新特性. 1.brew install bash 2.安装到/usr/local/bin/bash里面.可以通 ...
- [na]ip routing&no ip routing
这玩意,考虑三层路由时候,想明白,挺重要 ip routing--------查路由表, 如果ping的目的在RT中没有,不发出任何包(arp也不会发出) 如果RT中存在,则arp 下一跳,相当于no ...
- angular学习笔记(九)-css类和样式2
在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名: 我们来看一个小例子,点击error ...
- 使用mybatisplus实现动态路由
1.pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...
- 获取不到Repeater控件中的CheckBox选中状态
写在前面的话:在做一个项目的时候,需要使用到Repeater控件,并且在Repeater控件内放置了CheckBox控件来标志需要删除的行,选中后,在后台取到的CheckBox的值总是为false.最 ...
- Centos7 squid安装与配置
装squid yum install -y squid 安装httpd(用于后面生成密码文件) yum install -y httpd 或者 yum install httpd-tools -y 配 ...
- Java Web开发中用Tomcat部署项目的三种方法
第一种方法:在tomcat中的conf目录中,在server.xml中的,<host/>节点中添加: <Context path="/hello" docBase ...
- .Net应该学什么怎么学（三）
更新时间:2012年06月05日18时26分 来源:传智播客.Net 接上篇[我来解惑].Net应该学什么怎么学(二)七.HTML.JavaScript.Dom HTML是对网页长什么样 ...