UI培训之DIV高度自适应方法汇总

更新时间:2016年03月15日17时25分来源:澳门大阳城APP入口UI培训学院浏览次数:

1、JS实现（判断2个div高）；
2、纯CSS方法；
3、加背景图片实现。

◆DIV+CSS基本布局：

1、js实现div高度自适应

代码如下：

2、纯CSS方法实现DIV高度自适应

CSS代码

1           #m1,#m2
2           {
3           padding-bottom:32767px!important;
4           margin-bottom:-32767px!important;
5           }
6           @media all and (min-width:0px){
7                  #m1,#m2
8                  {
9                  padding-bottom:0!important;
10              margin-bottom:0!important;
11              }
12              #m1:before,#m2:before
13              {
14              content:'[DONOTLEAVEITISNOTREAL]';
15              display:block;
16              background:inherit;
17              padding-top:32767px!important;
18              margin-bottom:-32767px!important;
19              height:0;
20              }
21       }

3、加背景图片实现DIV高度自适应

html代码：

这是第一列

这是第二列

css代码：

1           #wrap{width:776px;background:url(bg.gif) repeat-y 300px;}
2           #column1{float:left;width:300px;}
3           #column2{float:right;width:476px;}
4           .clear{clear:both;}

本文版权归澳门大阳城APP入口UI培训学院所有，欢迎转载，转载请注明作者出处。谢谢！
作者：澳门大阳城APP入口UI培训学院
首发：