一般我們都是用fixed來固定定位话告，代碼如下：
position:fixed;
top:0;
left:0;
right:0;
但這樣會出現(xiàn)很多的問題：
類似下拉頁面時柳击，導航會一起滾動，無法固定在屏幕頂部拾稳，或者是有input標簽的時候胖腾，調(diào)出軟鍵盤之后，頁面無法往上頂媒役，導致標簽被擋住，尤其是在414屏宪迟，效果更嚴重
所以為解決這些兼容性問題酣衷，建議使用如下兩種布局：
其一：position:absolute?
首先構(gòu)建一個width: 100%;height: 100%;overflow:hidden;的容器，在此容器中次泽，分離頂部導航跟內(nèi)容區(qū)穿仪，頂部導航為absolute定位，內(nèi)容區(qū)為滾動區(qū)意荤，這樣即可達到導航固定在頂部啊片，頁面可滾動，整體代碼如下：
.view {
? ? ? ? position: absolute;
? ? ? ? left: 0;
? ? ? ? right: 0;
? ? ? ? top: 0;
? ? ? ? z-index: 1;
? ? ? ? overflow: hidden;
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? ? ? margin: 0 auto;
? ? ? ? -webkit-box-sizing: border-box;
? ? ? ? box-sizing: border-box;
? ? }
? ? .header {
? ? ? ? position: absolute;
? ? ? ? top: 0;
? ? ? ? left: 0;
? ? ? ? right: 0;
? ? ? ? z-index: 1000;
? ? ? ? width: 100%;
? ? }
? ? .content {
? ? ? ? overflow-y: scroll;
? ? ? ? position: absolute;
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? }
其二：?flex布局
將整體頁面一分為二玖像，頭部跟內(nèi)容區(qū)紫谷，flex方向為垂直即可
代碼如下：
.view {
? ? display: flex;
? ? flex-direction: column;
? ? flex-wrap: nowrap;
? ? width: 100%;
? ? height: 100%;
}
.header {
}
.content {
? ? overflow-y: scroll;
}
————————————————
原文鏈接：https://blog.csdn.net/suchaiyishengtui/article/details/86699422
