CSS-设置父容器的width：100%时，渲染背景颜色只根据第一次打开浏览器窗口的大小渲染的问题

CSS-设置父容器的width：100%时，渲染背景颜色只根据第一次打开浏览器窗口的大小渲染的问题

        .TopBar{
            width: 100%;
            background: #e3e4e5;
            border-bottom: solid 1px #ddd;
            margin: 0;
            padding: 0;
        }


		.middleBar{
            width: 1190px;
            margin: auto;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            color: rgb(156, 156, 156);
        }

问题描述：如果打开当前网页时浏览器窗口的大小<1190，那么背景颜色的渲染范围只有当前body的大小，此时滑动下方生成的滚动条，屏幕右边原本被隐藏的TopBar部分没有背景颜色，如下图红色分割线，右边没有渲染背景颜色。

解决办法

1、设置body的min-width

因为父容器的width：100%采用的是第一次打开浏览器时body的宽度，但子容器的宽度比当前body的宽度要大，此时子容器右溢出，相当于没有渲染上颜色的那部分已经超出了父容器的范围，所以自然没有背景颜色。因此可以将body的min-width设置为当前页面最宽的元素的宽度。

2、设置子容器middleBar的背景颜色与父容器TopBar相同
这个办法并没有解决子容器右溢出的问题，但是视觉效果可以掩盖背景颜色的问题。

参考：
[1]: https://segmentfault.com/q/1010000004368706