让两个DIV的高度隐式同步

以前遇到两个相临近的块,高度要一样,但是内容多少又不定时,我都是通过把这两块封装在TD里面实现,但今天在CSDN上面看到有人要通过JS来实现这个,我尝试了一下.
http://topic.csdn.net/u/20080617/18/cfc9201a-613f-432e-a828-3f3808b9553d.html?seed=553780558

用下面的代码实现了.(虽然个人认为这个代码实用性不太强,但在特定的场景也是一种解决方案).从下面的代码可以看出JQuery使用真是十分方便,使用原生的对象我还真不知道如何取出一个元素的高度,我用document.getElementById("rightbar").style.height得到的是auto.



首发于:http://www.xfuse.cn



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>无标题文档 </title> 


  <SCRIPT LANGUAGE="JavaScript" src="http://code.jquery.com/jquery-latest.js"> </SCRIPT> 


  <Script> 


  </script> 
</head> 

<body> 
<div> 


  <div id=main > 
  动态生成的内容,高度不定 <br> 
  动态生成的内容,高度不定 <br> 
  动态生成的内容,高度不定 <br> 
  动态生成的内容,高度不定 <br> 
  动态生成的内容,高度不定 <br> 
  动态生成的内容,高度不定 <br> 

  </div> 
  <div id=rightbar > 
  右边栏,内容比main少 
  </div> 
</div> 
<script language="javascript"> 
window.onload=function(){ 

var he= $('#main').height(); 

$('#rightbar').height(he); 

}; 
</script> 
</html> 

你可能感兴趣的:(div)