<!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>
View Code
