本文介绍了一种通过JavaScript实现的左右两个div布局中高度自适应的方法。当其中一个div的内容高度发生变化时，另一个div的高度会自动调整以保持一致，确保页面布局的美观与协调。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>左右高度自适应</title>
06 <style type="text/css">
07 #left_div{width:200px;float:left;border:1px solid #000;margin:0 2px;}
08 #right_div{width:200px;float:left;border:1px solid #0C0;}
09 </style>
10 <script language="javascript">
11 function divHeight(left,right){
12 if(document.getElementById(left) && document.getElementById(right)){
13 if(document.getElementById(left).offsetHeight<document.getElementById(right).offsetHeight){
14 document.getElementById(left).style.height=document.getElementById(right).offsetHeight+"px";
15 }else if(document.getElementById(left).offsetHeight>document.getElementById(right).offsetHeight){
16 document.getElementById(right).style.height=document.getElementById(left).offsetHeight+"px";
17 }
18 }
19 }
20 </script>
21 </head>
22 <body onload="divHeight('left_div','right_div')">
23 <div id="left_div">
24 test<br />test<br />test<br />test<br />test<br />test<br />
25 </div>
26 <div id="right_div">
27 test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
28 </div>
29 </body>
30 </html>
本文来自: PHP程序员笔记(http://www.phpernote.com/) 详细出处参考：http://www.phpernote.com/article-13-35.html
扫一扫
408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
