dudo博客

<!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>练习文档01</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>
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<br>222222<br>33333333<br>444444444<br>555555555</div>
<div id="Div2" class="Div_Right">22222<br>dsaf</div>
<div class="Div_bottom">———————————这是底部的DIV,在左中右中DIV不等高的情况下会跑上去重叠了<br>—————————————-我现在想用一个JavaScript代码来令左右两半的Div等高<br><br>(注意:中左中右两个DIV的高度是无法事先确定的)<br>为什么这个JavaScript在FireFox无效呢?</div>
<script>
SameH("Div1","Div2");
</script>
</body>


共有(3)条评论

dudo 发表于 2006-10-22 at 13:14 #1楼

虽然这种方法很容易的实现了等高,但是也存在一定的问题:Js只有在加载的时候才会起作用,所以如果页面加载完毕之后通过改变浏览器的大小来改变页面的大小,那么Js对于Div样式的控制就会失效从而导致不等高问题的出现。

[回复]


天使的猫 发表于 2008-11-15 at 23:08 #2楼

改变浏览器的大小可以用onresize事件来控制。
上次看到一个很不错的脚本,在firefox下也没有问题。

[回复]


oooo 发表于 2008-12-02 at 15:49 #3楼

我满心欢喜的用了,效果不错,不过在火狐里看的时候却没有变化,
不过还是非常地感谢![reply=dudo,2009-04-25 09:30 PM]建议使用纯CSS+XHTML的方法来实现[/reply]

[回复]


随便说两句
名字:
Email:
网站:
内容:

无觅相关文章插件,快速提升流量