html頁眉佈局

我想要一個完整的頁眉，而頁面中心的內容的固定寬度。這裏是我的代碼：html頁眉佈局

HTML：

<body> 
<div class="header"> 
    <div class="wrap">Header</div> 
</div> 

<div class="content"> 
    content 
</div> 

</body>

CSS：

.header{ 
    background:yellow; 
} 

.wrap, .content{ 
    border:1px solid red; 
    margin:0 auto; 
    width:500px; 
}

我用.wrap的.header因此，在報頭中的內容也有相同的寬度內.content。

問題： 佈局看起來很好，然而，當瀏覽器窗口的寬度變得小於所述包裹（即500像素）的寬度的問題開始。在這種情況下，當我們向右側滾動頁面時，標題背景的某些部分會丟失。

JSFiddle： 在這裏您可以看到jsfiddle（http://jsfiddle.net/QS3nS/1/）。如果您減小瀏覽器寬度以使輸出窗口的寬度變得小於500像素，則可以看到問題。

在標題

.header{ 
    background:yellow; 
    min-width: 500px; 
}

2012-02-05 17:19:12

謝謝，它解決了我的問題設定一個最小寬度。我會盡快接受這個答案。 – user1117313 2012-02-05 17:24:11

回答