近期在實作手機版本的 Sticky Footer 時，有遇上一些實作上的狀況題。這邊筆記下網路上收集到的各種解決方法。
內容
程式碼
1. https://codepen.io/andy922200/pen/poBMdQB
2. https://codepen.io/andy922200/pen/oNOKomZ
3. https://codepen.io/andy922200/pen/jORgadJ
4. https://codepen.io/andy922200/pen/YzMmEgx
5. https://codepen.io/andy922200/pen/GRLVOeQ
6. https://codepen.io/andy922200/pen/xxevPeO
技術點
1. position: sticky 會參考最近的 scroll 父層元素當作 viewport。因此若要用來製作 stick footer，仍需要盡可能的放在 <body> 的最外層，以免被父層的 <div> 給影響到，無法與畫面的寬度 100% 相同。
2. position: absolute 當有遇上畫面滾動時，便無法確保 100% 固定在畫面底部
3. position: fixed 在有畫面滾動時，依然可以獲得完整的畫面寬度。不過要注意：
3-1: 與其同層的 <div> 會需要推一個 footer 的高度，滾動 scroll bar 才可以完整顯示
3-2: 滾動條是有寬度約 16px 的。你需視情況決定，footer 的寬度是否需減去這 16px
參考資料
1. Sticky Footer, Five Ways
2. Sticky position
3. How to position a div sticky to the end of a mobile page?
