缩小浏览器窗口时背景样式消失的问题

饥人谷-陆恩泽

最近写页面的时候遇到一个bug（如下图所示），当我缩小浏览器窗口的时候出现了个bug，那就是右侧的背景图片和顶部导航条消失了变成了“白带”。这个问题以前没有遇到过（以前写的一些页面背景就是白色，所以可能掩盖了这个问题），这个页面布局时我设定了一个固定宽度的div， 预想效果是缩小浏览器的时候出现滚动条来展示页面。然而却发现这种恶心的东西，没办法只能先百度啊。找出了原因是由于当我缩小浏览器窗口小于设定的div的width值的时候，div的被撑开了。那么解决方案是什么了？？？这才是最想要知道的事情！！！

背景图片无法撑开.png

我尝试了在背景图片样式中添加width：100%（如下），然而并没有什么卵用。

.c-b-line{
        background: url("http://img11.360buyimg.com/da/jfs/t1846/102/1681370066/1829/f869c8e3/5672999aNce0252c9.jpg") 0px 0px repeat-x;
        height: 5px;
        width: 100%;/*设置宽度为100%*/
        position: relative;
        top: -5px;
        z-index: -1;
        }

那么添加background-size：cover？这是因为我看了这篇博文,他出现了浏览器缩小无法撑开整个高度， 他尝试用这个方法来解决。

.c-b-line{
        background: url("http://img11.360buyimg.com/da/jfs/t1846/102/1681370066/1829/f869c8e3/5672999aNce0252c9.jpg") 0px 0px repeat-x;
        height: 5px;
        width: 100%;/*设置宽度为100%*/
        background-size: cover;
        position: relative;
        top: -5px;
        z-index: -1;
        }

然并卵啊！！！博文中介绍按照w3c对于background-size: cover的定义，当一个容器存在一定的宽和高（也就是都不为0），那么background-size: cover，一定可以保证背景图缩放至覆盖满整个容器，但是我的页面的背景图片并没有固定的宽度 ,还有他出现问题原因和我也不同。
后来看到了这篇博文，贴个链接，这里面解释是因为我的的网站将居中的div设置为1210px，当缩小窗口的宽度小于1210px时，实际body元素的宽度并没有被撑开为”1210px“，而是按自己设置为“浏览器可视窗口的宽度”和"min-width"属性中的最大值来解析的。所以所有body下设置为100%的元素，都等于body按上述规则解析的值。解决方法就是设置body属性min-width值为 1210px。

 body{
            min-width: 1210px;
        }

然后白带就消失了，如下图。

白带消失.png

后来我又尝试了另外一个方法，那就是为这个背景图片设置固定的宽度，设置宽度为1600px，浏览器缩小是可以撑开整个页面，但是多处来一块空白的地方，看起来很别扭，所以还是按照包裹容器的宽度设定你的body的最小宽度吧，貌似可以用js根据不同浏览器设置宽度的，等我学完了再说。