通栏窗口缩小后背景颜色显示不全

相信很多人在写页面的时候遇到过这样的一种问题，外层div（设置背景色，宽度为100％）是通栏的，内部设置一个页面的主体部分内容，这个时候如果我们将浏览器窗口缩小的时候，这时候右侧超出当前浏览器窗口大小的部分就会失去了我们给外层设置的背景色。如下图所示，这是为什么呢？？

image.png

解析：
这是因为外层div设置的100％是相对于当前文档所言的，也就是浏览器的窗口大小，现在我们假设当前浏览器窗口是1000px，而主体内容部分是1200px，那么，当我们把浏览器窗口缩放到1000px时，也就是外层的div实际上只有1000px了，而我们的背景色是对外层div进行设置的，这样就会出现上述图片的问题。

解决：
其实解决方法很简单，只要我们给外层的div增加一个min-width: 1200px;就可以了。

原因：
这是因为如果我们不设置了最小宽度，那么当外层的div缩放到1000px的时候，内层的div仍然是1200px，但是我们的css只设置了外层div的北京颜色，因此只有外层的部分显示背景色，而当我们拖动滚动条的时候右侧的背景色就没有了。