高度自适应，height与min-height
height:100%;和height：inherit的异同
1、兼容性差异
height:100%; ie6+
height:inherit; ie8+
2、除去兼容性，大多数height：100%与height:inherit都表现为height:auto;
3、绝对定位却不同，当子元素的高度大于父元素的高度时，height:inherit 比 height：auto；好用多了
height:inherit;会让子元素限制在父容器内，而加上height：auto；的属性的子元素会超出父元素的
height:100%;与min-height的用法
1、当子容器的高度超过父容器的时候，父容器会被子容器撑开
解决办法1、height：inherit；
解决办法2、给子元素加上min-height:0;
我最近做了一个项目就是子元素的高度大于父容器，结果把父容器撑开了，先说说我的页面大致结构
html:
<body>
<header></header>
<section></section>
<footer></footer>
</body>
css:
body{
width:100%;
height:100%;
display:flex;
display:-webkit-flex;
}
header{
width:100%;
height:100px;
}
section{
width:100%;
min-height:0;
flex:1;
-webkit-flex:1;
overflow：hidden；
}
footer{
width:100%;
height:100px;
}
以上是我一个移动端项目，用了min-height:0;很好的解决了子元素超出父容器的情况
ps：当时试用了height：inherit；也是可以的、、、
