Flex布局實現頭尾固定、中間內容自適應

頭尾固定，中間區域可以滑動效果是移動端最常見的效果，以京東頁面為例。以前開發時常用的方法是用固定布局position:fixed;實現，但是該方法在ios上或者其他機型上會出現問題。現在，可以用flex方法快速實現該布局

<div class="wrap">
       <div class="header">頭部</div>
       <div class="content">中間內容區域</div>
       <div class="footer">尾部</div>
</div>

html,body{
    height: 100%;    /* 很重要 */
}
.wrap{
    width: 100%;
    height: 100vh;     /* 很重要，如果設置成100%，頁面內容過多時不會固定 */
    display: flex;
    flex-direction: column;
    font-size: 16px;
}
.header{
    background: aquamarine;
    height: 60px;
}
.content{
    flex: 1;    /* 很重要 */
    overflow-y:auto; /* 很重要，否則當該內容超過一屏時，尾部區域不會固定 */
    background: #4CAF50;
}
.footer{
    background: tan;
    height: 40px;
}

/* 讓內容居中顯示 */
.header,.content,.footer{
    display: flex;
    align-items: center;
    justify-content: center;
}

運行效果：

說明：css樣式中，一定要設置html,body以及最外層包裹容器的高度為100%，同時中間內容區域的樣式一定要添加flex:1;以及overflow-y:auto;