请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

热门经验分享: 护肤 减肥 化妆 美发 育儿 恋爱 理财 职场 旅行 运动 养生 购物 生活 运势 游戏 手机 电脑 小吃 美食 宠物 装修 西点
当前位置: 经验分享网 > 游戏/数码 > 互联网 > CSS背景100%平铺 浏览器缩小背景显示不全解决办法

CSS背景100%平铺 浏览器缩小背景显示不全解决办法

时间:2015-12-9 13:22 点击:1380次
前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章。
  本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章。

  把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺的背景少了一块,而且窗口越小时,空白越大。

  解决方法:

  width:100%;min-width:990px;

  在width:100%; 后面加个 min-width:**px; 这个长度取于你的网页最低宽度。

  Ps:

  逐风个人认为上诉的解决方案还不够人性化,

  想要实现不同分辨率下灵活覆盖,逐风推荐以下处理方式:

  1、结合JS,当窗口变化时执行事件进行width的固定值调整;

  2、CSS限定最小宽度,当浏览器还有继续往小缩的时候,会出现滚动条,因为我们已经预定好最小的宽度,而这个宽度并不会让用户看到空缺的地方,这种也是纯CSS的解决方案了;

  如果大家还有新的解决方案,欢迎来和逐风一起探讨交流;\(^o^)/~

  另一个办法

  缩小窗口时CSS背景图出现右侧空白BUG的解决方法

  页面容器(#wrap)与页面头部(#header )为100%宽度。而内容的容器(#page)为固定宽度960px。浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。如下图所示窗口宽度大于内容层宽度:

  改变浏览器窗口的大小,小于内容层宽度。

  拖动水平滚动条,出现了bug的样子。右边的背景不存在了。

  问题的根本在于:当窗口缩小时,浏览器默认100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(960px)。从而出现了固定宽度大于100%宽度的现象。浏览以此理解来解析页面,就出现了容器宽度理解上的差异,出现了一个非常奇特的BUG。如图所示。

  我们分析,问题的解决之道:既然是宽度理解上的差异,只需要告知浏览器页面容器的宽度,头部元素的宽度不能小于内容层的宽度即可。当浏览器窗口缩小时,保持页面容器和头部元素的最小宽度为内容层的宽度。这样就解决了宽度上出现问题。

  css代码为:

  #ijingyan{
  width:100%;
  background:#ddd;
  width:expression(document.body.clientWidth <= 960? "960px": "auto");
  min-width:960px;
  }

  #header {
  width:100%;
  height:78px;
  border-bottom:1px solid #f60;
  background:#f0f0f0 url(head_tbg.jpg) repeat-x;
  }

  #main{
  width:960px;
  height:100px;
  margin:5px auto;
  background:#fff;
  border:1px solid #00CCCC;
  }

  html代码为:
  <div id="ijingyan">
  <div id="header"></div>
  <div id="main"></div>
  </div>

鲜花

握手

雷人

路过

鸡蛋
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
------分隔线----------------------------

最新评论

相关经验
驾驶常识介绍 自动档汽车档位介绍 详解新手上路的十个“怎么办” 中医药治疗肾病的优势有哪些 肾病综合征预防与保健 中医栗建华大夫介绍 Discuz! 修改在没有登录的情况下看到关键词和描述 抓住5大重点 韩系卷发这样梳才更美 那些年搞不定的“修容高光” 问题 春夏必学超完美补妆法 教你自制染发剂,美丽安全天然无毒害! 流行染发颜色大揭密 棕色发型惹人爱 穿着服装礼仪常识 分场合穿着打扮 电脑总死机怎么办 电脑死机原因 佳能70D和佳能6D都有什么区别 佳能相机选择 深蹲的好处有什么 不仅健身还抗衰老 夏季九分牛仔裤怎么搭配好看 更新升级提示:请先升级 UCenter 到 1.6.0 以上版本的解决方法 DiscuzX使用其它模板点击diy没有反应问题解决 股票入门基础知识——基本概念 股票入门基础知识——股票分类 股票入门基础知识——股息红利 股票入门基础知识——股票指数 股票入门基础知识——股票市场(1) 股票入门基础知识——股票市场(2) 股票入门基础知识——股票市场(3) 股票入门基础知识——股份公司 股票入门基础知识——股票发行 股票入门基础知识——股票风险 股票入门基础知识——常用术语 教你五种刹车技巧 新手司机控制好力度 JS实现多选框效果_多选框 科讯CMS V9.0标签大全 公司企业宣传语 简易的漂浮图片代码_漂浮图片代码_悬浮代码_带关闭的 五日均线操盘法 其实,炒股真的不难 JS实现内容超出多少后隐藏、显示 非常简单实用的Jquery(js)给当前页或者跳转后页面的导航栏添加选中后样式 ... 百度和谷歌的高级搜索语法示例详解 css position:absolute 如何居中对齐? :first-child 伪类向元素的第一个子元素添加样式。 感冒和肾病的关系 什么水果含维生素c 含有维生素c的水果有哪些 海信智能电视如何看电视直播图文教程 家居装修风格有哪些?家居装修风格的分类 天猫魔盒2安装软件看电视直播方法 乐视超级电视TV看电视直播方法 只为追求高品质生活 新居家电选购指南 彻底弄懂css中单位px和em,rem的区别 phpcms v9默认后台管理员登录地址修改方法 推广技巧 :我可以选择哪几类关键词 高中历史好适合学什么专业 所谓的手机“360度”摄像头 是用软件实现的 玩手机摄影最好要知道的20条通用法则! phpcmsv9 按比例等宽完美缩略图方案 PHPCMS V9删除栏目时没有权限(转载) PHPCMS 关于会员功能和phpsso通信 的一些经历 phpcms V9表单提交邮件配置及发送到邮件提醒详细内容 phpcms表单向导导出为EXCEL文件插件 PhpStorm常用的一些快捷键 phpcms v9 模板标签技巧,模板标签常用方法 phpcms多站点用二级目录作为站点域名,内容页生成的路径不对,都是默认了用第一个站点 ... 口气重,有可能是癌症在捣鬼....... 猪肉上有蓝色印记还能吃吗? 营业执照换地址需要什么流程 明仁天皇为何要退休 傲寒 (马頔演唱歌曲) 解决火狐浏览器显示的“警告:无响应脚本"问题 缺铁性贫血是药补还是食补-中医栗建华 PHPCMS页面标题中SEO标题用横线"-"隔开的修改方法 KindEditor编辑器自动过滤首行缩进和全角空格的解决方法 河北景观膜结构展示六 phpcms发布内容时阅读数随机显示 河北膜结构车棚「同创停车棚制作公司优势」 钱了APP会员,是不是真的?钱了官网及APP下载地址小编一文带你了解 ... 二次构造柱浇筑泵报价-眼镜板的作用知道多少 phpcms V9 新版本如何设置TAG标签关键词伪静态 phpcms 修改后台内容管理列表数量的方法 htaccess详解及.htaccess参数说明-NC 忽略路径大小写问题 如何使植物短期内不会缺水 PHPCMS V9搜索结果页分页伪静态方法 同样是100纸币为啥价值差别就那么大呢? 离心泵的零件清洗要求 海关行政复议轨制的 概述 保温建材市场的 突飞猛进发展前景可观 电视广告片计划制定的 4个原则 反射型防水透汽膜 氯化钙与氨作用的 机理 企业宣传片制作解说词要有生动性 防水透气膜让电子产品使用寿命更长 给运营人员工作中的一些建议 dev氧化锆氧气分析仪的介绍 微量氧气分析仪介绍 PHP按符号截取字符串的指定部分的实现方法 不锈钢紧固件行业未来发展趋势 不锈钢螺丝一般是用哪种型号的材料 notepad++换行符号替换方法分享 卡通熊怎么画
推荐内容