让左右两列高度一致的代码

发表于2012-05-23 11:16:03来源于创想网页设计工作室

次点击[] [] [] [打印] [关闭窗口] [评论]

欢迎大家加入创想工作室QQ群 网络瘫痪上不了网?电脑出故障?找破解软件?加入创想工作室QQ群,向大神求助,一步解决问题!QQ群号码:326338868[点此获取更多QQ群]
在网页布局时,有时为了美观,需要让左右两列的高度始终保持一致。下面的代码可以实现:

<script>
var divleft = document.getElementById('w191');
var divright = document.getElementById('w698');
if(divleft.scrollHeight>divright.scrollHeight){
  divright.style.height=divleft.scrollHeight+'px';
}else{
  divleft.style.height=divright.scrollHeight+'px';
}
</script>

上面的代码在使用中发现有时候页面需要刷新一下才能生效,因此我们改成等页面内容都加载完了之后才判断高度,再执行这个代码,修改的代码如下:

<script>
$(document).ready(function(){

var divleft = document.getElementById('w191');
var divright = document.getElementById('w698');
if(divleft.scrollHeight>divright.scrollHeight){
  divright.style.height=divleft.scrollHeight+'px';
}else{
  divleft.style.height=divright.scrollHeight+'px';
}

});
</script>

注意红色字体的要跟你代码中DIV的ID一致,这样才能起作用。

相关热词搜索:左右高度代码

© copyright 2002-2024, 22BA.COM All Rights Reserved

网站备案号:粤ICP备19114910号

ChuangXiang Design Studio - WebDesign & Internet Marketing

关于我们业务范围联系我们开心一刻网站地图

QQ群一:326338868QQ群二:78712271

QQ群三:193078177

邮箱:news@22ba.com

地址:深圳市福田区金田路现代国际大厦2606