[問題] 在手機版Chrome將頁面移到最上面之後…

[banana2014 (香蕉共和國)]

┌─────┐
│部分程式碼│
└─────┘

.div{
    width: 100%;
    height: 50px;
    background: red;
    position: absolute;
    bottom: 0;
    left: 0;
}
<div class="div"></div>


┌────┐
│GIF 動畫│
└────┘

http://i.redwh.al/M.gif

┌──┐
│問題│
└──┘

如上，

紅色的bar(class為div的區塊)，

我希望它的底部絕對位置一直在100%畫面高度的地方
(也就是position等於absolute，bottom等於0的位置)

假設頁面可以往下捲動(可以往下滑)

用電腦版沒事，但是用手機版Google Chrome就有事

不曉得是哪個天才發明手機版Google Chrome，

頁面往下滑上面的網址列也會跟著往上滑然後不見，

害我再將頁面往上滑到最頂端時，下面那個紅色的bar就會衝過頭(超出畫面底端)

一直要等到我放開手指頭它才會回到正確的位置




請問各位我要怎麼解決「衝過頭」的問題?

謝謝


--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.169.175.139
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1485072042.A.0D1.html
推 jmlntw: 用 position: fixed
嗯…

我也是這麼想的

不過我要怎麼知道捲軸捲到哪裡的時候才能把position從absolute改為fixed呢?

因為我根本不知道Google Chrome的網址列高度多少


也不可能完完全全地改成fixed，因為這樣它就不是我想要的固定在「絕對位置」了



謝謝

※ 編輯: banana2014 (118.169.175.139), 01/22/2017 16:19:53
→ jmlntw: position: fixed; bottom: 0; 不就固定了嗎
推 trust2065: 同樓上方式即可；另外absolute和fixed差別你需要看一下
→ trust2065: 。http://zh-tw.learnlayout.com/position.html