CSS頁眉和頁腳正在放大放大

Question

我剛剛完成重新設計此網站（www.imustsolutions.co.za），並且當用戶放大（FF中的Ctrl +）時，頁眉和頁腳出現問題。

這裏的問題是： 頁腳/頭的背景色不畫來填充屏幕（水平）當用戶放大

我在做什麼錯的其餘部分。？

這裏再次網站：www.imustsolutions.co.za

在此先感謝。

問候， 中號

Answer 1

這基本上它是如何工作的。 The width of a block-level element由其包含塊的寬度決定。並且the width of the initial containing block（即，html元素的包含塊）具有「視口」（即瀏覽器窗口）的尺寸。

換句話說，除非你明確地設置了塊的寬度，使它們比視口寬，否則它們不會比視口寬。

您可以在StackOverflow本身的頁腳上看到同樣的情況，例如：如果在此頁面上放大顯示，直到出現水平滾動條，然後向側面滾動，則會看到灰色背景也被切掉。

解決此問題的一種方法是將整個頁面轉換爲浮動，因爲the width of floating elements會縮小以適合其內容的尺寸，並且不受視口尺寸約束。

只需將float: left添加到html或body標籤即可應對。儘管如此，我還沒有在所有瀏覽器中測試過。

Answer 2

問題是您的標題寬度設置爲100％（原始瀏覽器窗口的100％），而您的主要內容設置爲980像素。

因此，當您處於全尺寸模式時，100％將大於980像素，但在調整大小或放大100％時將變爲小於980像素，並且您的標頭將會中斷，而主要內容會溢出到右側，如果需要的話。

設置頁眉和頁腳的最小寬度與主內容的寬度（加上填充和頁邊距，如果有的話）相同的值通常足以解決這些問題。

關於您的網站，因爲它似乎你的主要內容設置爲980px，你可以再試試：

#header {min-width:980px;}

Answer 3

你的頁眉和頁腳的DOM元素應該放在主要內容中。因此，您的標題100％將受到主內容大小的限制：980px