今天重写了一个移动端的页面，改完后才发现页面中间需要自适应高度，传统的获取高度设置方法并不能实现页面想要的效果，便对原有页面样式进行了一下研究，发现原有页面是用flex布局实现自适应，于是照搬写法，却始终无法向原有页面一样自适应高度，但写法都是一样的，最后仔细将页面的结构性元素的样式尝试修改了一边，才发现原因：flex做自适应时，html和body需要先设置为100%，否则下面的子元素无法获取到高度。具体看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
height: 100%;
}
*{
margin: 0;
padding: 0;
}
.wap{
display: flex;
flex-direction:column;
height: 100%;
}
.item1{
background: red;
}
.item2{
background: green;
}
.item3{
flex: 1;
-webkit-box-flex: 1;
background: blue;
overflow-y: auto;
}
.item4{
height: 50px;
100%;
background: chartreuse;
}
</style>
</head>
<body>
<div class="wap" >
<div class="item1"></div>
<div class="item2">
<div>
<input type="text" placeholder="1111">
</div>
</div>
<div class="item3">
</div>
<div class="item4"></div>
</div>
</body>
</html>
实现效果如下：(将绿色部分内容删除后，中间蓝色部分会自动填充到上面去)
