如何解決瀏覽器縮小出現橫向滾動條時網頁背景圖出現空白的問題

原因：
當窗口縮小時，瀏覽器默認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.pswp.cn/news/247435.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/247435.shtml
英文地址，請注明出處：http://en.pswp.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