今天重寫了一個移動端的頁面，改完後才發現頁面中間需要自適應高度，傳統的獲取高度設置方法並不能實現頁面想要的效果，便對原有頁面樣式進行了一下研究，發現原有頁面是用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;
width: 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>
實現效果如下：(將綠色部分內容刪除後，中間藍色部分會自動填充到上面去)
