满幅的背景，定宽的内容

效果

背景沾满父容器，内容是定宽的，即使在不同的分辨率下的宽度不一样，也只是通过媒体查询改变而已

最经典的如 页脚

通常是这样设计的

<footer>
		<div class="wrapper">
        <!-- 内容 -->
    </div>
</footer>

footer {
    background: #F7FBFD;
}
.wrapper {
    max-width: 900px;
    margin: 10px auto;
}

但实现需要多添加一个 div，有没有只用 css 解决的方案呢？

解决方案

margin: auto 的作用：左右外边距实际上都等于视口宽度的 一般减去内容宽度的一半，即

margin-right = margin-left = 50% - 450px

所以我们完全可以去掉那一层 div

footer {
    max-width: 900px;
    padding: 10px calc(50% - 450px); /* 用 padding，因为背景是填满父容器的 */
    background: #F7FBFD;
}

可以简写成如下，引入 padding = 50% - 450px 实际上是刚好给内容留了 900px 的宽度

footer {
    padding: 10px calc(50% - 450px);
    background: #F7FBFD;
}