製作網站的時候,常常會使用到css背景色的效果,但之前碰到了好幾次,設定完內容div後,在div外再包一層div設定背景,但每當瀏覽視窗縮小,出現捲軸向右拉時,父層div背景就會露白的問題,如下圖:
內容div:寬990px
父層div背景:寬100%
正常應該為這樣,粉紅色的背景會延伸至整個畫面:
但當視窗縮小於內容div的寬度,出現捲軸時,捲軸拉至右側,就會發現父層div背景露出了一塊白底:
這時只要將父層div背景的設定改為:min-width:990px(與內容div同)就可以囉!
這是因為當背景width設為100%的時候,抓的其實是視窗的大小,所以當視窗小於裡面區塊的時候,右邊就會出現露白的情形了。只要將最小寬設定與裡面區塊相同,就可以解決啦!
小提醒:如果內容區塊有設定margin或padding,要記得把設定的寬度扣掉,不然還是會有一樣的情況喔!