你对DIV高度自适应的方法是否了解,这里和大家分享一下,网站制站中,我们经常要把两个并排显示的div实现一样高的效果,即每列高度相同,有以下几种方法。
DIV高度自适应方法汇总
网站优化(seo)中,提到过网站样式的优化,即在网站的布局设计中,采用DIV+CSS来布局。网站制站中,我们经常要把两个并排显示的div实现一样高的效果,即每列高度(事先并不能确定哪列的高度)的相同,有以下几种方法解决DIV高度自适应问题:
1、JS实现(判断2个div高);
2、纯CSS方法;
3、加背景图片实现。
◆DIV+CSS基本布局:
- <dividdivid="mm">
- <dividdivid="mm1"></div>
- <dividdivid="mm2"></div>
- </div>
1、js实现div高度自适应
代码如下:
- <scripttypescripttype="text/javascript">
- <!--
- windowwindow.onload=window.onresize=function(){
- if(document.getElementById("mm2").clientHeight<document.
- getElementById("mm1").clientHeight){
- document.getElementById("mm2").style.height=document.
- getElementById("mm1").offsetHeight+"px";
- }
- else{
- document.getElementById("mm1").style.height=document.
- getElementById("mm2").offsetHeight+"px";
- }
- }
- -->
- </script>
(注:网上公布了不少方法,但代码或多或少有错;上面的是无错代码;上面的代码在IE6.0/IE7.0下通过,并没有在opera和firefoxs下测试。)
2、纯CSS方法实现DIV高度自适应
CSS里代码(IE下测试通过,但不会显示div下边框,即border-bottom):
- /*左右自适应相同高度start*/
- #m1,#m2
- {
- padding-bottom:32767px!important;
- margin-bottom:-32767px!important;
- }
- @mediaalland(min-0px){
- #m1,#m2
- {
- padding-bottom:0!important;
- margin-bottom:0!important;
- }
- #m1:before,#m2:before
- {
- content:'[DONOTLEAVEITISNOTREAL]';
- display:block;
- background:inherit;
- padding-top:32767px!important;
- margin-bottom:-32767px!important;
- height:0;
- }
- }
- /*左右自适应相同高度end*/
3、加背景图片实现DIV高度自适应
这个方法,很多大网站在使用,如163,sina等。
XHTML代码:
- <dividdivid="wrap">
- <dividdivid="column1">这是第一列</div>
- <dividdivid="column1">这是第二列</div>
- <divclassdivclass="clear"></div>
- </div>
CSS代码:
- #wrap{776px;background:url(bg.gif)repeat-y300px;}
- #column1{float:left;300px;}
- #column2{float:right;476px;}
- .clear{clear:both;}
还有其他的一些方法源码天空,但主流就是这几种了。如果你还有关于多个div自适应高度的好的代码,请给我们留言,欢迎与我们讨论。