HTML页面（浏览器）宽度小于内容宽度，超出页面宽度的部分不显示

在HTML页面中，页面的宽度一般是内容宽度。

但在某些情况下，如果设置的内容的宽度，当浏览器的尺寸小于内容宽度，页面的显示就会出现问题。

• 下图是一个PC页面，在浏览器宽度>680px时能正常显示。

•  当浏览器宽度为500px时，浏览器出现的滚动条，看起来似乎正常。

•  但拖动滚动条，超出部分的则显示空白。

 原因分析

在上图中，页面的header部分没有设置宽度，他的宽度默认是占一行。

当浏览器宽度小于680px时，header的内容由于设置了width：680px，浏览器被撑开，出现滚动条。header的宽度按默认值，为浏览器宽度（504px），而拖动滚动条，空白区域的部分是超出504px的位置，header自然不存在，因此显示为空白。

问题解决

• 给header设置最小宽度（min-width）

 由于内容的宽度为680px，只需要给外面包裹的父容器设置最小宽度（min-width: 680px;），父容器就能填满整个空间，此时显示正常。