我剛剛完成重新設計此網站(www.imustsolutions.co.za),並且當用戶放大(FF中的Ctrl +)時,頁眉和頁腳出現問題。CSS頁眉和頁腳正在放大放大
這裏的問題是: 頁腳/頭的背景色不畫來填充屏幕(水平)當用戶放大
我在做什麼錯的其餘部分。?
這裏再次網站:www.imustsolutions.co.za
在此先感謝。
問候, 中號
我剛剛完成重新設計此網站(www.imustsolutions.co.za),並且當用戶放大(FF中的Ctrl +)時,頁眉和頁腳出現問題。CSS頁眉和頁腳正在放大放大
這裏的問題是: 頁腳/頭的背景色不畫來填充屏幕(水平)當用戶放大
我在做什麼錯的其餘部分。?
這裏再次網站:www.imustsolutions.co.za
在此先感謝。
問候, 中號
這基本上它是如何工作的。 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
標籤即可應對。儘管如此,我還沒有在所有瀏覽器中測試過。
問題是您的標題寬度設置爲100%(原始瀏覽器窗口的100%),而您的主要內容設置爲980像素。
因此,當您處於全尺寸模式時,100%將大於980像素,但在調整大小或放大100%時將變爲小於980像素,並且您的標頭將會中斷,而主要內容會溢出到右側,如果需要的話。
設置頁眉和頁腳的最小寬度與主內容的寬度(加上填充和頁邊距,如果有的話)相同的值通常足以解決這些問題。
關於您的網站,因爲它似乎你的主要內容設置爲980px,你可以再試試:
#header {min-width:980px;}
你的頁眉和頁腳的DOM元素應該放在主要內容中。因此,您的標題100%將受到主內容大小的限制:980px
適用於我全部和純文本縮放。 FF3.6,Windows 7,1920 x 1080像素。 – 2010-02-18 11:44:38
1680 x 1050,ff3.6 win7也..工作正常..好網站的方式,也許一點點工作在你的頁腳 – ant 2010-02-18 11:50:46
這裏工作... FF 3.6 Vista的 - 1920x1200像素 – 2010-02-18 12:17:57