又一种左右DIV高度保持一致的方法

时间:2015/12/3 17:56:00来源:互联网 作者:flyso 点击: 867 次
<!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=gb2312" />
<title>www.flyso.cn--又一种左右DIV高度保持一致的方法</title>
<style type="text/css">
<!--
body{
    margin:0px;padding:0px;
}
.Div_top{
 width:100%;
 background:#93beff;
}
.Div_bottom{
 width:100%;
 background:#ff00fc;
}
.Div_Left{
 position:absolute;
 width:200px;
 background:#ff6000;
 left:0px;
}
.Div_Right{
 margin-left: 200px;
 background:#00c17b;
}
-->
</style>
<script type="text/javascript">
function SameH(leftDiv,rightDiv)
{
var a=document.getElementById(leftDiv);
var b=document.getElementById(rightDiv);
document.write(a.clientHeight+'px--');
document.write(b.clientHeight+'px--');
document.write(a.scrollHeight+'px--');
document.write(b.scrollHeight+'px');
if (a.scrollHeight < b.scrollHeight)
{
a.style.height= b.scrollHeight;
}
else
{
b.style.height= a.scrollHeight;
}
}
</script></head>
<body>
<div class="Div_top">这是顶部的div</div>
<div id="Div1" class="Div_Left">11111
222222
33333333
444444444
555555555</div>
<div id="Div2" class="Div_Right">22222
dsaf</div>
<div class="Div_bottom">---------------------------------这是底部的DIV</div>
<script type="text/javascript">
SameH("Div1","Div2");
</script>
</body>
</html> 


Copyright © 2005 - 2016 flyso.cn. 飞搜 版权所有 鄂ICP备11002783号-3