移動端開發使用css中使用position將一個div固定瀏覽器底部,會擋住內容,該怎麼完美的解決?

01-01

使用position:fixed,把一個div固定顯示在手機瀏覽器的底部,但是當用戶滑到最下面的時候,會擋住一部分內容的顯示(因為fixed脫離了文檔流),該怎麼科學合理的解決這個問題?現在想到比較能解決問題的辦法是加一個相同高度的空的div,或者使用js判斷瀏覽器到最下方的時候將該div拉迴文檔流,

很簡單。給網頁底部加一個和底部的固定元素的高度的padding。這樣滑到最底部的時候就不會遮擋內容了

你看看這個能否幫你解決問題：

Ratchet教程：構建自己的底部Bar_mobile, Ratchet 教程_w3cplus
Ratchet教程：構建自己的頂部Bar_mobile, Ratchet 教程_w3cplus
【轉載】Web移動端Fixed布局的解決方案_mobile 教程_w3cplus

我自己的一貫做法，

1.把整個HTML,body的高度固定在100%高度，overflow hidden，

2.裡面一個div class main放主要內容，flex布局

3.class main div裡面放置主體內容的div class content 設置flex 1,overflow-y auto和div class banner 設置需要的高度

基本這樣就好了，手機端對flex只需考慮新舊語法問題就好，不用考慮支持不支持

我一直也是寫一個空div，高度和固定的底部高度一樣。

加個margin是最直接的方法了吧。

我只能想到下面幾種辦法：

1,給容器加個padding-bottom或者margin-bottom，這個用的最多；

2,用js寫成向下滑動時隱藏，點擊屏幕或者向上滑動時顯示，這種方式的優點是用戶瀏覽內容時，不會被遮擋；

3,判斷高度是否到達底部，控制position，一般浮動導航這麼做。

額。。習慣做法。。body下面2個div 定位都用絕對。第二個fixed 第一個bottom值寫第二個的高度，然後剩餘內容寫到第一個div裡面所有滾動都在第一個div 裡面。如果有頂部條，同理實現，具體就是用類似iscroll 的寫法

最近也遇到這個問題，我的解決方法是給body的子元素加padding－bottom值，該值和底部固定元素等高；我也試過用margin－bottom，它失效

最方便的方法，給中間的內容加個padding-top就好了

最近做項目遇到過這種情況。

建議樓主可以把footer 這個單獨拿下來，寫在外面，其他的div 寫在main這個裡面

.main{

header{}

section{}

}

footer{}

然後.mian高度定位100% position:absolute, bottom取footer的高度,讓裡面設置滾動.

footer 讓其絕對定位。設置在頁面底部

. div{

margin- bottom:[d]px;

}

把包含底部最大的那個塊元素，加上這個。

距離根據底部元素的高度確定。

搜索 sticky footer，有好幾種純css解決方案，兼容IE6哦

最近項目剛開始做，前兩天就碰到了這樣的問題，給設置position:fixed屬性的元素加個父元素，用height或者padding將其撐開。看看某動在移動端的設置。