如何解决浏览器缩小出现横向滚动条时网页背景图出现空白的问题

原因：
当窗口缩小时，浏览器默认100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(1024px)。从而出现了固定宽度大于100%宽度的现象。浏览以此理解来解析页面，就出现了容器宽度理解上的差异，出现了一个非常奇特的BUG。

解决方案：

html,
body {height: 100%;width: 100%;min-width: 1024 !important;min-height: 768px !important;
}.main{width: 100%;height: 100%;min-width: 1024px !important;/* 设置成和body一样的最小宽度 */background: url('../../images/index/index_bg3.jpg') no-repeat;background-size: 100% 100%;
}


 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/247435.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

前端设计模式

前端设计模式

1. 单例模式 2.装饰器模式 转载于:https://www.cnblogs.com/lyraLee/p/11210985.html
阅读更多...
区别 (function($){...})(jQuery)、$(function(){ })和$.fn

区别 (function($){...})(jQuery)、$(function(){ })和$.fn

一、(function($){…})(jQuery) 首先function(arg){...}定义了一个匿名函数，参数为arg,而调用时需要在函数后面写上括号和实参，由于操作符的优先级，函数本身也需要括号，也就成了： （function(arg){...}&…
阅读更多...
git 清除缓存

git 清除缓存

清除git缓存 git config --local --unset credential.helpergit config --global --unset credential.helpergit config --system --unset credential.helper保存git缓存 git config --global credential.helper store转载于:https://www.cnblogs.com/zhouyideboke/p/11211650.…
阅读更多...
网页里如何使用js禁用控制台

网页里如何使用js禁用控制台

网页里如何禁用右击事件&#xff1f;使用jQuery&#xff0c;几句代码就可以搞定了 document.oncontextmenu function(){return false;} 简单示例&#xff1a; js实现&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><…
阅读更多...
Java生鲜电商平台-订单中心服务架构与异常订单逻辑

Java生鲜电商平台-订单中心服务架构与异常订单逻辑

Java生鲜电商平台-订单中心服务架构与异常订单逻辑 订单架构实战中阐述了订单系统的重要性&#xff0c;并从订单系统的信息架构和流程上对订单系统有了总体认知&#xff0c;同时还穿插着一些常见的订单业务规则和逻辑。上文写到订单的拆单部分时搁置了&#xff0c;现在接上文继…
阅读更多...
Vuex的全面用法总结

Vuex的全面用法总结

1. vuex简介 vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起&#xff0c;集中式来管理。需要声明的是&#xff0c;这里所说的状态指的是vue组件中data里面的属性。了解vue的同学应该是明白data是怎么回事的吧&#xff0c;如果不懂…
阅读更多...
vue中通过第三方代理解决跨域问题

vue中通过第三方代理解决跨域问题

最近在学node&#xff0c;遇到了跨域的问题&#xff0c;来记录下方法 首页服务端的框架是通过express-generator 搭建起来的 npm install -g express-generator 具体接下来的细节不多说&#xff0c;今天主要说跨域 的问题 左侧为服务端项目结构&#xff0c;www为可执行文件&am…
阅读更多...
使用V-chart时配置踩过的一些坑

使用V-chart时配置踩过的一些坑

如何配置图表信息 echart的配置项可谓是相当的海量&#xff0c;能不看就不看。而v-chart对其进行了不少的简化&#xff0c;所以我们想要自定义一个图表时&#xff0c;最好按照以下步骤来检查&#xff1a; 图表私有属性 v-chart每一个图表都有自己独有的设置项&#xff0c;想…
阅读更多...
ZDOzMRVAOq

ZDOzMRVAOq

11 转载于:https://www.cnblogs.com/wc529065/p/11212226.html
阅读更多...
vue 出现Elements in iteration expect to have 'v-bind:key' directives

vue 出现Elements in iteration expect to have 'v-bind:key' directives

是由于eslint检测出现bug 解决方法有两种 v-for 后添加 :keyitem <li v-for"item in list" :key"item"> 在build处关闭eslint检测 ...(config.dev.useEslint ? [createLintingRule()] : []),
阅读更多...
requestAnimationFram

requestAnimationFram

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画&#xff0c;并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数&#xff0c;该回调函数会在浏览器下一次重绘之前执行 注意&#xff1a;若你想在浏览器下次重绘之…
阅读更多...
vue/return-in-computed-property Enforce that a return statement is present in computed property

vue/return-in-computed-property Enforce that a return statement is present in computed property

此规则强制return语句在computed属性中得完整存在。 <script> export default {computed: {/* ✓ GOOD */foo () {if (this.bar) {return this.baz} else {return this.baf}},bar: function () {return false},/* ✗ BAD */baz () {if (this.baf) {return this.baf}},ba…
阅读更多...
vue-cli3 一直运行 /sockjs-node/info?t= 解决方案

vue-cli3 一直运行 /sockjs-node/info?t= 解决方案

首先 sockjs-node 是一个JavaScript库&#xff0c;提供跨浏览器JavaScript的API&#xff0c;创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。 服务端&#xff1a;sockjs-node&#xff08;https://github.com/sockjs/sockjs-node&#xff09; 客户端&#xff1a;so…
阅读更多...
Java生鲜电商平台-生鲜供应链(采购管理)

Java生鲜电商平台-生鲜供应链(采购管理)

Java生鲜电商平台-生鲜供应链(采购管理) 在生鲜供应链系统中采购中心这一模块&#xff0c;它是电商公司管理采购的模块&#xff0c;包含供应商管理&#xff0c;采购订单管理&#xff0c;采购商品管理&#xff0c;在该模块中采购订单是采购中心的核心模块。在其他的比如供应商的…
阅读更多...
链式调用setTimeout()与setInterval()的区别

链式调用setTimeout()与setInterval()的区别

使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能。执行时机是不能保证的&#xff0c;因为在页面的生命周期中&#xff0c;不同时间可能有其他代码在控制 JavaScript 进程。在页面下载完后的代码运行、事件处理程序、Ajax 回调函数都必须使用同样的…
阅读更多...
Multiple Dispatch

Multiple Dispatch

今天在看文章的时候遇到了multiple dispatch这个术语。看看了wiki&#xff0c;写得云里雾里。最后搜了搜资料&#xff0c;基本上搞清楚了。 multiple dispatch的混淆之处在于其和object system结合在一起。当然wiki上写得很清楚&#xff1a;“a function or method can be dyna…
阅读更多...
如何让Element UI的Message消息提示每次只弹出一个

如何让Element UI的Message消息提示每次只弹出一个

Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示&#xff0c;但是公司的测试人员在进行测试时会一直点&#xff0c;然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况&#xff08;毕竟客户不会闲着没事一直点点点&…
阅读更多...
jsp头文件的内容/response.setHeader

jsp头文件的内容/response.setHeader

转载的&#xff01;&#xff01;&#xff01;做一个记录!!!! response.setHeader 是用来设置返回页面的头 meta 信息, 使用时 response.setHeader( name, contect ); meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中 1、&l…
阅读更多...
css3实现科技感的呼吸灯效果

css3实现科技感的呼吸灯效果

呼吸灯效果是一种常见的灯光效果&#xff0c;比如网页的按钮&#xff0c;现实生活中比如电脑的开机按钮。 使用CSS3的animation方法可以实现很多迷人的网页动画特效。 使用CSS3 配合box-shadow即可实现类似的效果 样式代码如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18…
阅读更多...
WIX(20121031) 应用设置默认变量

WIX(20121031) 应用设置默认变量

花了了好长时间找到的 这样可以将变量信息定义到wxs中&#xff0c;方便应用 <?xml version"1.0" encoding"UTF-8"?> <?define ProductName"Wix CY"?> <Wix xmlns"http://schemas.microsoft.com/wix/2006/wi">&l…
阅读更多...
最新文章

Copyright @ 2022~2023