左右自适应 DIV高度

css

2009-04-11 15:51

<div style="width:800px;background:#cccccc;height:0px;">
<div id="right" style="width:380px;height:100%;float:left;border:1px solid #265492;">left4</div>
<div id="left" style="width:360px;float:left;background:#376037;">
right<br>
right<br>
right<br>
right<br>
right<br>
right<br>
right<br>
</div>
</div>

<script   type="text/javascript">
    //关键代码
<!--  
var   a=document.getElementById("left");  
var   b=document.getElementById("right");  
if(a.clientHeight<b.clientHeight)  
{  
a.style.height=b.clientHeight+"px";  
}  
else{  
b.style.height=a.clientHeight+"px";  
}  
-->  
</script>

-------------------------------------------------------------------------------------

单项适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">
<!--
#main {background: #69c;width: 400px;}
#left {background: #f00;float: left;width: 100px;}
   #right {background: #0c3;float: right;width: 300px;}
   -->
   </style>
   </head>
    <body>
     <div id="main">
      <div id="left">   <p>1</p>
        <p>2as<del>ds</del>ad</p>
        <p>3</p>
         <p>4</p>
          <p>5</p>
           <p>6</p>
           <p>7</p>
            <p>8</p>
             <p>9</p>
             <p>10</p></div>
       <div id="right">
     left
              </div><!-- right 结束-->
             
               </div><!-- main 结束-->
              
<script language="javascript">
//                                             被适应的                                                            
document.getElementById("right").style.height=document.getElementById("left").scrollHeight+"px"
</script>
       </body>
      
       </html>