首页 > 代码库 > 满屏背景(不能出现下右滚动条)及内容随浏览器一定伸缩的实现
满屏背景(不能出现下右滚动条)及内容随浏览器一定伸缩的实现
如图所示,要基本兼容所有浏览器,ie要求8以上,同时适应除手机ipad以外的所有屏幕分辨率,比如一体机等,通过走过的弯路,个人总结如下:
- 不使用背景background,因为其难以控制自适应,使用img,宽width高height都为100%,同时为使其做为背景,使用定位position与z-index,背景图上的内容是一个大的元素包裹,该元素(如div,table)的宽高也为100%,但是其内包裹的元素,按需设置宽高px
- 页面logo、标题和其他内容,均使用了定位position,上面部分通过top的百分比来控制,下面通过bottom的百分比来控制,使得其在不同分辨率下以及浏览器的伸缩下的位置不出现大变动
- 对背景图使用min-width(ie8支持),使浏览器收缩到一定分辨率(出现横向滚动条)的时候,按需固定图片的宽度px;
- 其他注意元素的margin值,会导致高度过大出现滚动条,不用overflow:hidden,会使得在某些分辨率下把底部内容给抹掉了
代码暂略。
个人见解,有更方便的实现方法欢迎邮箱交流代码案例,邮箱:1355455221@qq.com
满屏背景(不能出现下右滚动条)及内容随浏览器一定伸缩的实现
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。