您当前的位置: 首页 » HTML/XHTML/XML编程 » 左右两栏等高实现方法
左右两栏等高实现方法
论坛链接
等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简单，但毕境麻烦。现在有了个更简单的方法。这个方法的原理是事先通过正内边距来使其拥有足够高度，然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏，我们可以隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度，从而实现了等高。
<!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);
}
})
好了，到这里相信大家已经都会了。其实还有一些方法可以实现等高的，比如说背景，大家没事研究研究吧；
<!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);
}
})
好了，到这里相信大家已经都会了。其实还有一些方法可以实现等高的，比如说背景，大家没事研究研究吧；