在HTML页面中，页面的宽度一般是内容宽度。
但在某些情况下，如果设置的内容的宽度，当浏览器的尺寸小于内容宽度，页面的显示就会出现问题。
- 下图是一个PC页面，在浏览器宽度>680px时能正常显示。
- 当浏览器宽度为500px时，浏览器出现的滚动条，看起来似乎正常。
- 但拖动滚动条，超出部分的则显示空白。
原因分析
在上图中，页面的header部分没有设置宽度，他的宽度默认是占一行。
当浏览器宽度小于680px时，header的内容由于设置了width：680px，浏览器被撑开，出现滚动条。header的宽度按默认值，为浏览器宽度（504px），而拖动滚动条，空白区域的部分是超出504px的位置，header自然不存在，因此显示为空白。
问题解决
- 给header设置最小宽度（min-width）
由于内容的宽度为680px，只需要给外面包裹的父容器设置最小宽度（min-width: 680px;），父容器就能填满整个空间，此时显示正常。