javascript 实现 两列高度自适应

在网页设计中,如何让两个层的高度由内容自适应 一直是比较麻烦的事情.以前在蓝色理想上看到用外层将超出部分隐藏掉的方法来实现自适应,可是我的层有边框,这个就不行了.试了几天,终于找到一个比较不错的方法.

html代码如下:

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
  < head >
   < title >  new document  </ title >
   < style  type ="text/css" >
   #left {
   float : left ;
    width : 100px ;
    height : 100px ;
    background : #eee
    
   }
  #dd {
  float : right ;
  height : 300px ;
  width : 100px ;
  background : #ccc
   }

   </ style >

   </ head >

  < body >
  < div   id ="left" >
 
  </ div >
  < div  id ="dd" >
 
  </ div >
< script  type ="text/javascript" >
   var  a = document.getElementById( " dd " ).clientHeight;
document.getElementById( " left " ).style.height = a;
 
   </ script >
  </ body >
</ html >

 

效果如下:

o(∩_∩)o...哈哈