«

Javascript解决左右高度自适应的问题

时间:2024-1-19 17:10     作者:韩俊     分类: Javascript


使用Javascript解决左右高度自适应的问题,通过javascript控制使左右两个div块随其中的一个块的高度增加而增加,从而保证两边的高度对齐。效果如下图:

Javascript解决左右高度自适应的问题

案例代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>maopiaopiao.com使用Javascript解决div高度自适应的问题</title>
<style type="text/css">
#left_div{width:200px;float:left;border:1px solid #000;margin:0 2px;}
#right_div{width:200px;float:left;border:1px solid #0C0;}
</style>
<script language="javascript">
function divHeight(left,right){
    if(document.getElementById(left) && document.getElementById(right)){
        if(document.getElementById(left).offsetHeight<document.getElementById(right).offsetHeight){
            document.getElementById(left).style.height=document.getElementById(right).offsetHeight+"px";
        }else if(document.getElementById(left).offsetHeight>document.getElementById(right).offsetHeight){
            document.getElementById(right).style.height=document.getElementById(left).offsetHeight+"px";
        }
    }
}
</script>
</head>
<body onload="divHeight('left_div','right_div')">
<div id="left_div">
test<br />test<br />test<br />test<br />test<br />test<br />
</div>
<div id="right_div">
test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
</div>
</body>
</html>

标签: javascript

热门推荐