天行健、君子以自强不息;地势坤、君子以厚德载物!

关于我

zhenn 前端工程师,淘宝 北京!这里仅仅记录我的技术生活以及成长历程,如果有兴趣和我交流,猛击以下链接即可。
follow zhenn in TC Microblog
follow zhenn in SinaTwitter

再谈DIV的高度自适应

关于div高度的自适应,一直是个让人头疼的问题,整理了一下以前总结的方法,仅表示我也玩过。

html code:

1 <div id="container">
2   <div id="leftSide">这边的高度自适应右侧的高度</div>
3   <div id="rightSide">
4     <script type="text/javascript">
5       for(i=0;i<10;i++){
6         document.write(i + '<br>');
7       }
8     </script>
9   </div>
10 </div>

可用的方法大概有以下四种:

1,用absolute设置一个足够高的高度,在父级元素中清除溢出的部分,具体的css code如下:

1 #container{ font-size:14px; width:300px; overflow:hidden; border:3px solid blue; margin:10px auto 0; color:#fff; position:relative;}
2 #leftSide{ width:100px; float:left; height:200000px; left:0; top:0; position:absolute; background:gray;}
3 #rightSide{ width:190px; float:right; text-align:center; background:purple;}

其实这种方法并没有真正的实现左右两个div等高,只是用了障眼法,利用containeroverflow:hidden清除了左侧多余的部分,以达到视觉上左右等高的目的,虽然有“白猫黑猫,逮着老鼠就是好猫”的说法,但是笔者并不着重推荐这种方法,因为给父级元素添加relative,会带来很多不必要的麻烦,况且只能是设置absolute的一侧自适应另一侧的高度,并不能让两侧中任一侧去自由去适应另一侧!

2,负外补丁和正内补丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相结合

1 #container{ font-size:14px; width:300px; overflow:hidden; border:3px solid blue; margin:10px auto 0; color:#fff;}
2 #leftSide{ width:100px; float:left; background:gray; padding-bottom:9999px; margin-bottom:-9999px;}
3 #rightSide{ width:190px; float:right; text-align:center; background:purple; padding-bottom:9999px; margin-bottom:-9999px;}

3,利用javascript脚本实现动态设置高度

1 <script type="text/javascript">
2   var left = document.getElementById('leftSide');
3   var right = document.getElementById('rightSide');
4   if(left.offsetHeight>=right.offsetHeight){
5     right.style.height = left.offsetHeight + 'px';
6   }else{
7     left.style.height = right.offsetHeight + 'px';
8   }
9 </script>

事实上,这种办法真正意义上实现了两侧等高,并且能让两侧中任一侧去自由去适应另一侧,但是其缺点就在于,只有当DOM加载完成后,才有会这样等高的效果,如果网速够快,这个漏洞可以忽略不计。

4,在父级元素中填充背景,css code如下:

1 #container{ font-size:14px; width:300px; overflow:hidden; border:3px solid blue; margin:10px auto 0; color:#fff; background:url(http://www.men-ideal.com/images/unit1030.jpg) repeat-y; }
2 #leftSide{ width:100px; float:left; }
3 #rightSide{ width:190px; float:right; text-align:center}

目前,这种方法是最流行的,同样也是一种“欺骗性”的解决办法,不过除了多使用一张图片之外,都可以堪称完美,这也是笔者极力推荐的!

posted on 2011-02-19 22:49  zhenn  阅读(709)  评论(0编辑  收藏  举报

导航