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

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

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

在网页布局时，有时为了美观，需要让左右两列的高度始终保持一致。下面的代码可以实现：

<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一致，这样才能起作用。

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

上一篇：jquery实现腾讯新闻幻灯片特效

下一篇：调用灵活的通用Jquery幻灯片焦点图插件