首页 > 代码库 > 用纯css使内容永远居在页面底部
用纯css使内容永远居在页面底部
在wap开发中,经常会有各种屏幕尺寸logo居页面底部的需求,内容大于一屏时logo跟在内容后面,内容小于一屏时,logo在当屏底部。
之前用过js,但是页面渲染中会有闪跳,效果不理想
方法一:用一个高度大于等于底部内容的空白块填充在全局块,让底部内容距离全局块自身高度的负值,这个方法比较保险,对各种浏览器都适用
方法二:让全局中最底的元素设置一个padding-bottom,值大于等于底部内容
方法三:用calc()函数,这个方法有些浏览器还不支持,并不是个完美的方法,虽然代码最简洁
此外,如果全局内容中有些大图片,直接这样的代码在wap中滚动不顺滑,可以在全局外面加个容器并加样式:
height:100%;
-webkit-overflow-scrolling:touch;
用纯css使内容永远居在页面底部
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。