用純css使內容永遠居在頁面底部


在wap開發中,經常會有各種屏幕尺寸logo居頁面底部的需求,內容大於一屏時logo跟在內容后面,內容小於一屏時,logo在當屏底部。

之前用過js,但是頁面渲染中會有閃跳,效果不理想

方法一:用一個高度大於等於底部內容的空白塊填充在全局塊,讓底部內容距離全局塊自身高度的負值,這個方法比較保險,對各種瀏覽器都適用

方法二:讓全局中最底的元素設置一個padding-bottom,值大於等於底部內容

 

方法三:用calc()函數,這個方法有些瀏覽器還不支持,並不是個完美的方法,雖然代碼最簡潔

此外,如果全局內容中有些大圖片,直接這樣的代碼在wap中滾動不順滑,可以在全局外面加個容器並加樣式:

height:100%;
-webkit-overflow-scrolling:touch;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM