在wap開發中,經常會有各種屏幕尺寸logo居頁面底部的需求,內容大於一屏時logo跟在內容后面,內容小於一屏時,logo在當屏底部。
之前用過js,但是頁面渲染中會有閃跳,效果不理想
方法一:用一個高度大於等於底部內容的空白塊填充在全局塊,讓底部內容距離全局塊自身高度的負值,這個方法比較保險,對各種瀏覽器都適用
方法二:讓全局中最底的元素設置一個padding-bottom,值大於等於底部內容
方法三:用calc()函數,這個方法有些瀏覽器還不支持,並不是個完美的方法,雖然代碼最簡潔
此外,如果全局內容中有些大圖片,直接這樣的代碼在wap中滾動不順滑,可以在全局外面加個容器並加樣式:
height:100%;
-webkit-overflow-scrolling:touch;