占满DIV剩余高度的三种方法

 

第一种,老套路,浮动大法

代码:

占满DIV剩余高度的三种方法_第1张图片

 

效果图:

       绿色DIV占满了外层DIV

占满DIV剩余高度的三种方法_第2张图片

第二种:calc  CSS计算

代码:

   这里在类名为div2的DOM外又加了一层div,主要就是为了说明,如果利用calc(100% - 50px);这种模式,那么这个DIV的父元素必须指定高度,可以是具体值,也可以是百分比,特别是dom结构嵌套很深的时候,特别好用。

占满DIV剩余高度的三种方法_第3张图片

 

效果图:

占满DIV剩余高度的三种方法_第4张图片

 

第三种,弹性盒 子




    
    
    
    Document



	

占满DIV剩余高度的三种方法_第5张图片

 

 

有收获就点个赞再走吧。。。。。

你可能感兴趣的:(css,占满div剩余高度)