最近做個頁面設計，頭部是搜尋框以及過濾按鈕那些，而剩餘高度內容則是列表內容用來顯示過濾後的內容。在移動裝置顯示頭部內容會隨螢幕大小而改變，所以不能把高度設定死，但剩餘部高度又要顯示列表內容。

構思是頭部有一部分的高度隨著內容的變化而變化，但這頭部是固定的fiexd。剩餘部分是列表高度。

每次試驗發現都雖說下面列表有接在頭部位置下面但是當頁面往上拉時列表內容會跑到頭部內容的下一層去。
一次意外巢狀的嘗試發現解決上拉列表時頂部的位置問題以及頭部高度自適應問題。直接上程式碼↓
CSS：

.header-height{
    position: fixed;
    height: auto
 
;
    width: 100%;
    z-index: 1;
}
.listBody-height{
    height: 100%;
}

HTML：

<div class="header-height">
<!-- 在這裡放頁面頭部固定的內容 -->
<div class="listBody-height">
<!-- 在這裡寫列表資料 -->
</div>
</div>

程式碼中可以看出頭部的高度設定為auto了，而列表的高度設為100%佔頁面剩餘的高度。