2014
08
04

視窗小於div寬度,捲軸右拉背景出現露白問題

關鍵字:div背景露白CSS網頁設計

製作網站的時候,常常會使用到css背景色的效果,但之前碰到了好幾次,設定完內容div後,在div外再包一層div設定背景,但每當瀏覽視窗縮小,出現捲軸向右拉時,父層div背景就會露白的問題,如下圖:

內容div:寬990px
父層div背景:寬100%

正常應該為這樣,粉紅色的背景會延伸至整個畫面:


但當視窗縮小於內容div的寬度,出現捲軸時,捲軸拉至右側,就會發現父層div背景露出了一塊白底:


這時只要將父層div背景的設定改為:min-width:990px(與內容div同)就可以囉!

這是因為當背景width設為100%的時候,抓的其實是視窗的大小,所以當視窗小於裡面區塊的時候,右邊就會出現露白的情形了。只要將最小寬設定與裡面區塊相同,就可以解決啦!

小提醒:如果內容區塊有設定margin或padding,要記得把設定的寬度扣掉,不然還是會有一樣的情況喔!
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所