![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>左边内容高度等于右边容器的高度</title> <style type="text/css" media="screen"> .cl{zoom:1;} .cl:after{clear:both; content:'\0020';display: block; height:0;line-height:0;font-size:0;} .box{ width: 600px; margin: 20px; } .jq-lt,.lt{ width: 220px; margin-right: 20px; background: #f00; float: left; } .jq-rt,.rt{ width: 220px; background: #ccc; float: left; } #lt{ background: blue; width: 250px; } #rt{ background: yellow; width: 250px; } </style> </head> <body> <!-- jQuery --> <input type="button" id="btn" name="" value="显示"> <div class="box cl" > <div class="jq-lt"> 左<br/> 左边<br/> 左边<br/> 左边<br/> 左边<br/> 左边<br/> 左边<br/> 左边<br/> 左边<br/> </div> <div class="jq-rt">右边</div> </div> <input type="button" id="btn1" name="" value="显示"> <div class="box" > <div class="lt" id="lt"> 左<br/> 左边<br/> 左边<br/> 左边<br/> 左边<br/> 左边<br/> 左边<br/> 左边<br/> 左边<br/> </div> <div class="rt" id="rt">右边</div> </div> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> //jQuery - math (function(){ $('#btn').click(function(){ $('.jq-rt').height($('.jq-lt').height() * 1); }); })(); window.onload = function(){ var btn1 = document.getElementById('btn1'); var ltBox= document.getElementById('lt'); var rtBox = document.getElementById('rt'); var iHeight = ltBox.offsetHeight; btn1.onclick = function(){ rtBox.style.height = iHeight + 'px'; } } </script> </body> </html>