首页 > 代码库 > 满屏背景(不能出现下右滚动条)及内容随浏览器一定伸缩的实现

满屏背景(不能出现下右滚动条)及内容随浏览器一定伸缩的实现

技术分享

 

如图所示,要基本兼容所有浏览器,ie要求8以上,同时适应除手机ipad以外的所有屏幕分辨率,比如一体机等,通过走过的弯路,个人总结如下:

  1. 不使用背景background,因为其难以控制自适应,使用img,宽width高height都为100%,同时为使其做为背景,使用定位position与z-index,背景图上的内容是一个大的元素包裹,该元素(如div,table)的宽高也为100%,但是其内包裹的元素,按需设置宽高px
  2. 页面logo、标题和其他内容,均使用了定位position,上面部分通过top的百分比来控制,下面通过bottom的百分比来控制,使得其在不同分辨率下以及浏览器的伸缩下的位置不出现大变动
  3. 对背景图使用min-width(ie8支持),使浏览器收缩到一定分辨率(出现横向滚动条)的时候,按需固定图片的宽度px;
  4. 其他注意元素的margin值,会导致高度过大出现滚动条,不用overflow:hidden,会使得在某些分辨率下把底部内容给抹掉了

代码暂略。

个人见解,有更方便的实现方法欢迎邮箱交流代码案例,邮箱:1355455221@qq.com

 

满屏背景(不能出现下右滚动条)及内容随浏览器一定伸缩的实现