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

如图所示,要基本兼容所有浏览器,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,会使得在某些分辨率下把底部内容给抹掉了

代码暂略。

个人见解,有更方便的实现方法欢迎邮箱交流代码案例,邮箱:[email protected]

时间: 2024-10-09 22:28:55

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

满屏 背景图

wxss中 page{ width:100%; height:100vh; background-image:url("转码 base64") background-size: cover; background-repeat: no-repeat; } 这样可以满屏 可是!!! 当内容过多 即屏幕可以滑动时 嘿嘿,背景图也是可以滑动的....多出的部分是空的 解决办法 加一行代码即可: background-attachment:fixed; 结束! 原文地址:https://www

满屏背景图登录

这是我手上的设计图 是思博大神的作品,ewei的新项目.图是1400*748的,把这张图做成网页说难不难,可是我考虑的问题是高度还原,即是在各个主流分辨率下看到的效果都要一样,这就有点懵逼了,查了很多网站的登录效果,基本都不是满屏登录的比如淘宝的京东的还有很多购物网站的登录框要么就是中间居中登录,就算是有图片的登录框也只是小图,这里放几张图上来吧,顺便加深记忆.当你去搜索一样东西的时候,有了明确的目的,这个时候你的视角看到的内容会不同很多.比如这次搜索登录框我就记住了基本的登录样式. 找了很多网

Android 底部弹出Dialog(横向满屏)

项目中经常需要底部弹出框,这里我整理一下其中我用的比较顺手的一个方式(底部弹出一个横向满屏的dialog). 效果图如下所示(只显示关键部分): 步骤如下所示: 1.定义一个dialog的布局(lay_share.xml) 1 <?xml version="1.0" encoding="utf-8"?> 2 3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/

背景图片满屏显示

如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单.比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改的. 所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性.就是用来控制背景图片的显示的.所以一般用作背景图片的有2类: 1.是一整张大图,尺寸和区域大小刚好吻合 2.一个很小的条状图,通过repeat后,形成

css背景图片拉伸 以及100% 满屏显示

如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改的.  所以实际的结果是只能重复显示,所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性.就是用来控制背景图片的显示的.所以一般用作背景图片的有2类: 1.是一整张大图,尺寸和区域大小刚好吻合  2.一个很小的条状图,通过repeat后

关于横屏和竖屏以及满屏

1.info.plist 找到"Supported interface orientations" 设置item 项为Portrait就可以了.这个设置为全局设置. 整个应用的屏幕状态 2.满屏问题 (转载http://www.ithao123.cn/content-9618420.html) IOS 模拟器 在iPhone5和iPhone5s显示不全,不能全屏显示 [摘要:正在编写IOS运用顺序的过程当中,我不停皆是应用iPhone Retina(3.5-inch)摹拟器测试的,统统

关于Flash满屏显示的总结

1.Flash只能设置固定宽高,全屏的Flash通常宽高都符合一般的显示器分辨率 2.Flash满屏的方法:Flash的RESIZE事件捕捉舞台宽高,Flash发布设置"百分比+无缩放",HTML设置100%显示 3.Flash满屏失败的原因:Flash宽高大于通常显示器分辨率,使得Flash基于Flash player的比率缩放了原来的尺寸,导致多出了舞台. 4.Flash的显示错位和异常:原因出于IE版本和某些游览器的兼容性问题,Flash内的元素通常不会受到影响,此时可以通过HT

CSS之全屏背景图

吐槽啦:Yeah  明天就是国庆了!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言归正传,我们回到我们的主题来看看CSS之全屏背景图.Nowdays,满屏大图的网页成为了一种fashion,网页的模板.布局是用CSS.HTML……来设计的,这里就以CSS来聊全拼背景图. 简单点,对于全屏背景图,我们只需用CSS的一个background-size属性就可以了. 当background-size的值

jquery全屏背景轮播切换的登录页

很大气漂亮的注册登录页面模板,带背景全屏轮播JS特效,基于jQuery实现,可左右按钮实现背景全屏切换,全屏效果是基于背景图片平铺,插件支持自动切换播放. 演示    下载 <!DOCTYPE html> <html> <head> <title>jquery带全屏背景图片轮播切换的注册登录页面-素材吧</title> <meta name="keywords" content="jQuery背景全屏轮播,JS