左右两栏等高实现方法

sunhw0725 · 发表于 2009-12-26 10:16:53

等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简单，但毕境麻烦。现在有了个更简单的方法。这个方法的原理是事先通过正内边距来使其拥有足够高度，然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏，我们可以隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度，从而实现了等高。

<!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>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; overflow: hidden;}
.left {float: left; width: 550px; background: #f00; border: 1px solid #666; padding-bottom: 6180px; margin-bottom: -6180px;}
.right {float: right; width: 240px; background: #090; border: 1px solid #666; padding-bottom: 6180px; margin-bottom: -6180px; }
</style>
</head>
<body>
<div class="main">
<div class="left">
<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 class="right">
<p>我会和左边一样高吗？</p>
<p>我和左边一样高哦！</p>
</div>
</div>
</body>
</html>

这里考滤到一个意外，就是右边的内容比左边多的时候；其实只需对左右两边都进行正内边距和负外边距设置就行了。这样不管是左边还是右边高，两边的高度始终都是一样的。利用这个原理，我们还可以实现三列多列等高布局。

顺便讲下JQ的实现方法。也很简单，原理就是取得左右两边的高度，然后判断这个值，把大的值赋给小的就行了。看代码：

jQuery(document).ready(function() {
var _leftheight = jQuery(".left").height();
      _rightheight = jQuery(".right").height();
      if(_leftheight > _rightheight ) {
         jQuery(".right").height(_leftheight);
      }
      else {
         jQuery(".left").height(_rightheight);
      }
})
好了，到这里相信大家已经都会了。其实还有一些方法可以实现等高的，比如说背景，大家没事研究研究吧；

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询