在HTML頁面中，頁面的寬度一般是内容寬度。
但在某些情況下，如果設定的内容的寬度，當浏覽器的尺寸小于内容寬度，頁面的顯示就會出現問題。
- 下圖是一個PC頁面，在浏覽器寬度>680px時能正常顯示。
- 當浏覽器寬度為500px時，浏覽器出現的滾動條，看起來似乎正常。
- 但拖動滾動條，超出部分的則顯示空白。
原因分析
在上圖中，頁面的header部分沒有設定寬度，他的寬度預設是占一行。
當浏覽器寬度小于680px時，header的内容由于設定了width：680px，浏覽器被撐開，出現滾動條。header的寬度按預設值，為浏覽器寬度（504px），而拖動滾動條，空白區域的部分是超出504px的位置，header自然不存在，是以顯示為空白。
問題解決
- 給header設定最小寬度（min-width）
由于内容的寬度為680px，隻需要給外面包裹的父容器設定最小寬度（min-width: 680px;），父容器就能填滿整個空間，此時顯示正常。