css之縮小視窗，網頁右側顯示白色的bug

假如有如下頁面 

<div class=”parent” style=”width: 100%; background-color: #f00;”>

    <div class=”child” style=”width: 1400px; background: url() no-repeat;”>

        ….省略若干層

    </div>

</div>

 上面寫的很清楚，想實現一個和瀏覽器等寬的div，parent，在該div裡實現一個固定寬度為1400畫素的div，child 當瀏覽器視窗寬度大於1400px時，顯示很正常，但是當瀏覽器寬度小於1400px時，出現了水平滾動條，拖動滾動條發現，右側的parent居然變成了白色，為什麼會這樣呢？可能你會說，我不是設定parent寬度和瀏覽器等寬了麼，為什麼還會出現這種問題，其實裡面的緣由很簡單，由於你設定了child的寬度為固定值1400px，當瀏覽器的寬度小於這個值時，實際parent元素並未撐到1400px，而是按照自己設定的瀏覽器可視寬度和min-width屬性中的最大值進行設定，此時計算的結果就會出現偏差，也就是你看到的為什麼parent的寬度是當前可視視窗的寬度，拖動滾動條右側全部變白了，那麼怎麼修改呢？很簡單

<div class="parent" style="min-width: 1400px; background-color: #f00;">

    <div class="child" style="width: 1400px; background: url() no-repeat;">

        ....省略若干層

    </div>

</div>

如果你body下有很多層，你不妨可以將body設定一下min-width