多種方式實作吸頂效果

方案一：js 實作

js 無敵大法好。相容極佳，但是體驗上就比較感人了。這裡不過多介紹。

方案二：Fixed 實作

fixed 是基于浏覽器的定位，在元件中顯的不是很适用。

而且在 iOS 也有相容性問題。

方案三：Sticky 實作

sticky 是新加的 position 的值，可以用于實作粘性定位。

但是顯示上會抖動，demo2

方案四：定高 + calc 實作

demo3，元件接收一個 height 參數，用于設定元件高度，預設值是 100vh，下面放一下僞代碼。

元件盒子{
    max-height: 100vh; 防止傳進來的高度太高。
}
搜尋盒子{
    height: 30px;人為的設定好高度
}
結果盒子{
    height: calc(100% - 30px);通過 calc 來寫死高度
    overflow: scroll;這裡 scroll 和 auto 都是可以的，不設定的話無法滑動
}      

方案五：absolute + box-sizing 實作

demo4 因為 absolute 是基于第一個非 static 祖先定位，是以我們可以讓搜尋盒子基于元件盒子定位，下面僞代碼。

元件盒子{
    max-height: 100vh; 防止傳進來的高度太高。
    position: relative; 讓裡面的absolute基于自己定位
}
搜尋盒子{
    height: 30px;人為的設定好高度
    position: absolute;設定為相對定位
    top:0;
    width: 100%; 決定定位的話寬度就沒有了，防止漏出地下的内容。
}
結果盒子{
    height: 100%;
    padding-top: 30px; 上面加個展位空白格，防止看不到第一條
    box-sizing: border-box; 修改盒子模型，height = border+padding+content
    overflow: scroll;這裡 scroll 和 auto 都是可以的，不設定的話無法滑動
}