Solve the Problem of blank background color on the right after the browser window becomes smaller or the image cannot be filled in full screen. The background color of the browser window

Solve the Problem of blank background color on the right after the browser window becomes smaller or the image cannot be filled in full screen. The background color of the browser window

This occurs when a full-screen webpage is created:

It is normal when the window is maximized. When the window is reduced, a scroll bar appears. When you drag the scroll bar to the right, a blank area is displayed, the background color is not displayed, but the element is still present.

 

The root problem is that when the window is reduced, the browser's default 100% width is the browser's window width. The fixed width (980px) of the lower content layer is ignored ). As a result, the fixed width is greater than 100%. Browsing to parse the page in this way leads to the difference in understanding the container width and a very strange BUG.

 

We analyzed the solution to the problem: since the difference in width understanding, we only need to inform the browser of the width of the page container, and the width of the Header element cannot be less than the width of the content layer. When the browser window is reduced, the minimum width of the page container and Header element is the width of the content layer. This solves the problem of width.

 

Solution:

Width: 100%; min-width: 980px;