1. 程式人生 > >通欄視窗縮小後背景顏色顯示不全

通欄視窗縮小後背景顏色顯示不全

問題:
相信很多人在寫頁面的時候遇到過這樣的一種問題,外層div(設定背景色,寬度為100%)是通欄的,內部設定一個頁面的主體部分內容,這個時候如果我們將瀏覽器視窗縮小的時候,這時候右側超出當前瀏覽器視窗大小的部分就會失去了我們給外層設定的背景色。如下圖所示,這是為什麼呢??

這裡寫圖片描述

解析:
這是因為外層div設定的100%是相對於當前文件所言的,也就是瀏覽器的視窗大小,現在我們假設當前瀏覽器視窗是1000px,而主體內容部分是1200px,那麼,當我們把瀏覽器視窗縮放到1000px時,也就是外層的div實際上只有1000px了,而我們的背景色是對外層div進行設定的,這樣就會出現上述圖片的問題。

解決:
其實解決方法很簡單,只要我們給外層的div增加一個min-width: 1200px;就可以了。

原因:
這是因為如果我們不設定了最小寬度,那麼當外層的div縮放到1000px的時候,內層的div仍然是1200px,但是我們的css只設置了外層div的北京顏色,因此只有外層的部分顯示背景色,而當我們拖動滾動條的時候右側的背景色就沒有了。