作者banana2014 (香蕉共和國)
看板Web_Design
標題[問題] 在手機版Chrome將頁面移到最上面之後…
時間Sun Jan 22 16:00:39 2017
┌─────┐
│部分程式碼│
└─────┘
.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://webptt.com/m.aspx?n=bbs/Web_Design/M.1485072042.A.0D1.html
1F：推 jmlntw: 用 position: fixed 01/22 16:06
嗯…
我也是這麼想的
不過我要怎麼知道捲軸捲到哪裡的時候才能把position從absolute改為fixed呢?
因為我根本不知道Google Chrome的網址列高度多少
也不可能完完全全地改成fixed，因為這樣它就不是我想要的固定在「絕對位置」了
謝謝
※ 編輯: banana2014 (118.169.175.139), 01/22/2017 16:19:53
2F：→ jmlntw: position: fixed; bottom: 0; 不就固定了嗎 01/22 16:25
3F：推 trust2065: 同樓上方式即可；另外absolute和fixed差別你需要看一下 01/31 23:52