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;
    }

“`