DIV高度自适应的实现方法介绍_css教程

DIV高度自适应的实现方法介绍: 发布时间：2020-06-09编辑：脚本学堂

本文介绍下，如何实现div高度自适应的相关内容，可以借且js代码实现，也可以用纯css方法，或通过加背景图片实现。哪种方法更适合你呢，抓紧来看看吧。

网站优化（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-width: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{width:776px;background:url(bg.gif)repeat-y300px;}

    #column1{float:left;width:300px;}

    #column2{float:right;width:476px;}

    .clear{clear:both;}

上一篇：div高度自适应浏览器高度的方法详解
下一篇：div高度自适应的实现方法（兼容FF与IE）

与 DIV高度自适应的实现方法介绍有关的文章

本文标题：DIV高度自适应的实现方法介绍
本页链接：http://www.jb200.com/article/8905.html

浏览排行

栏目分类

热点文章

DIV高度自适应的实现方法介绍