CSS高度自适应!

CSS如何实现高度自适应！

公用HTML<div class="box">        <div class="box1">头部固定高度</div>        <div class="box2">自适应高度</div></div>

第一种方法 calc()
浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持

*{margin:0;padding:0;}
html,body{
height:100%;
}
.box{
height:100%;
}
.box1{
height:100px;
background:tomato;
}
.box2{
height:calc(100% - 100px);
background:#ccc;
}

第二种方法 flex盒子方法

    *{margin:0;padding:0;}    html,body{        height:100%;    }    .box{        height:100%;        display:flex;        flex-flow:column;    }    .box1{        height:100px;        background:tomato;    }    .box2{        height:100%;        background:#ccc;    }

“`