当屏幕尺寸减小时，为什么我的100％宽背景div不填充窗口？

Question

我为背景提供了100％宽的div，为内容提供了964px宽的容器。当屏幕尺寸减小时，背景div不再填满屏幕。

http://penknifedesign-studio.com/1st-choice/

Answer 1

简而言之，您的后台div元素 以较低的分辨率填充窗口。 例如，查看subnav-contaner和what-we-do-container类，两者都有width: 100%;，并且两者都在屏幕缩小时保持宽度，其background声明保持不变。

你真正想问的是什么？

Answer 2

在 styles.css 中，您可以在很多类中设置固定宽度，例如：

.inside-the-building {
    width: 964px;
    margin: 0 auto;
    padding: 2%;
    position: relative;
    box-sizing: border-box;
}

只有在您达到媒体查询@media screen and (max-width: 770px)时才会覆盖此选项。这些断点之间存在差距。

作为解决方案，我建议您将所有width: 964px;替换为width: 100%;或width: inherited，例如：

.inside-the-building {
    width: 100%;
    margin: 0 auto;
    padding: 2%;
    position: relative;
    box-sizing: border-box;
}