javascript设置左右两栏高度相等代码

javascript设置左右两栏高度相等代码:
大家在布局的时候可能都遇到过这样的情况，两栏中的一栏的高度并不是固定的，那么如果需要使左右两栏的高度始终保持一致，那么使用js将是一个不粗的选择，下面就是一段代码实例，希望能够给大家带来帮助。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>javascript设置左右两栏高度相等-蚂蚁部落</title>
<style type="text/css">
body 
{
  font-size:12px;
  background-color:#fff
}
#left 
{
  background:#999999;
  float:left;
  width:100px;
}
#right 
{
  background:#0066FF;
  color:#fff;
  width:300px;
  float:left;
}
</style>
<script type="text/javascript"> 
function $(id)
{ 
  return document.getElementById(id) 
} 
function getHeight() 
{ 
  if($("left").offsetHeight>=$("right").offsetHeight)
  { 
    $("right").style.height=$("left").offsetHeight+"px"; 
  } 
  else
  { 
    $("left").style.height=$("right").offsetHeight+"px"; 
  } 
} 
window.onload=function()
{ 
  getHeight(); 
} 
</script>
</head>
<body>
<div id="left">蚂蚁部落欢迎您，强壮的个人如同一个强壮的小蚂蚁，如果您有良好的互助精神和分享的胸怀，那么就会体现出团队的力量</div>
<div id="right"></div>
</body>
</html>

以上代码实现了我们想要的效果，下面就介绍一下实现过程:

一.实现原理:
原理非常的简单，就是当左栏高度大于右栏的时候，将右栏的高度赋值给左栏的高度，否则就让左栏的高度等于右栏的高度，这样的就实现两栏高度始终相等的效果，下面是代码注释。
二.代码注释:
1.function $(id){}，声明一个函数用以获取具有指定id属性值的对象，类似于jquery的id选择器。
2.function getHeight(){},声明一个函数，用于设置两天的高度保持相等。
3.if($("left").offsetHeight>=$("right").offsetHeight)，判断左栏的高度是否大于等于右栏的高度。
4.$("right").style.height=$("left").offsetHeight+"px"，将右栏的css的height属性值设置为左栏的高度。
三.特别说明:
offsetHeight属性可以获取元素的高度，此高度包括：元素height值+内边距+边框，所以在设置两栏高度的时候，需要根据具体情况具体分析，上面代码只是提供了一个思路而已。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8520

更多内容可以参阅:http://www.softwhy.com/javascript/

javascript设置左右两栏高度相等代码

猜你喜欢