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