Workaround for a blank bug on the right side of the CSS background when the window is zoomed out

The page container (#wrap) is 100% width from the page header (#header). The contents of the container (#page) are fixed width 960px. The difference in width understanding occurs when the Browse window shrinks and is smaller than the content layer width. The window width is greater than the width of the content layer as shown:

Change the size of the browser window, less than the content layer width, as shown in.

Drag the horizontal scroll bar and the bug appears. The background on the right doesn't exist. As shown in.

The root of the problem is that when the window shrinks, the browser default width of 100% is the width of the browser window. While ignoring the lower content layer fixed width (960px). The result is a fixed width greater than 100% width. Browsing with this understanding to parse the page, there is a difference in the container width understanding, there is a very strange bug.

We analyze, the solution of the problem: since it is the difference in width understanding, only need to tell the browser page container width, the width of the head element can not be less than the width of the content layer. When the browser window shrinks, the minimum width of the page container and the head element remains the width of the content layer. This solves the problem on the width.

The CSS code is:

min-width:960px;}    #header {width:100%;    height:78px;    border-bottom:1px solid #f60; Background: #f0f0f0 URL (head_tbg.jpg) repeat-x;}    #page {width:960px;    height:100px;    MARGIN:5PX Auto;    Background: #fff; border:1px solid #00CCCC;}

The HTML code is:

<div id= "wrap" > <div id= "header" ></div> <div id= "page" ></div></div>

Workaround for a blank bug on the right side of the CSS background when the window is zoomed out