CSS calc实现满幅的背景，定宽的内容

如今很多网站官网的设计风格都为：

• 页面中包含多个大的区块，每个区块都占据了整个视口的宽度，区块的背景也各不相同。

• 内容是定宽的，即使不同分辨率下的宽度不一样，那也只是因为媒体查询改变了这个固定的宽度而已。在某些情况下，不同区块的内容也可能具有不同的宽度。

  
  
  https://www.mathjax.org/
  
  

  更多情况下，页面中只有某个特定区域以这个风格设计的，最典型的就是页脚。如下图：

airbnb.com

要设计这种风格，最常见的方法就是为每个区块准备两种元素：外层用来实现满幅的背景，内层用来实现定宽的内容。后者是通过margin：auto实现水平居中的。采用这种设计我们设计页脚通常这样做：

.footer {
  background: #333;
}
.wraper {
  max-width: 900px;
  margin: 1em auto;
}

缺点： 为了这个效果一定要多添加一层额外的元素。

解决方案

margin:auto这条声明所产生的左右外边距实际上等于视图宽度的一半减去内容宽度的一半。

外边距的宽度

由于百分比在这里是基于视口宽度来解析的（假设所有足下元素都没设有显示指定的宽度），我们可以把这个外边距的值表达式为50% - 450px,此时我们需要CSS3中的calc()函数，我允许我们在CSS中直接以这种简单的算式来指定属性的值。如果用 calc()取代原来的 auto。这个内层的容器样式就会变成：

.wraper {
  max-width: 900px;
  margin: 1em calc(50% - 450px);
}

之所以在页脚要加一层元素，唯一的原因就是为了给它的margin指定神奇的auto关键字，从而实现内容的水平居中布局。今我们用calc（）替代了神奇的auto，而且这个新值可以作为一个通用的CSS长度值应用到任何一个接受长度值的属性上。这意味着，只要我们愿意，还可以将这个长度应用到padding上，而整个效果是保持不变的。

.footer {
  max-width: 900px;
  padding: 1em calc(50% - 450px);
  background: #333;
}
.wraper {}

这样我们在纯净的无冗余的HTML结构上实现了想要的设计风格。
但是这个方案还是可以优化，如果把width这一行注释掉，你会发现其实并没有什么影响。
原因：当内边距是50%-450px时，只可能给内容留出900px之外（或大或小）的其他值，我们才能看得出区别。由于我们想要得到的内容宽度本来就是900px，这一行其实是冗余的，我们可以把它去掉，让代码更加的DRY。
另一个优化的地方在于，我们可以增加一条回退样式来增强向后兼容性。这样既是浏览器不支持calc（），我们也至少可以得到一个相对合理的内边距：

footer {
  padding: 1em;
  padding: 1em calc(50% - 450px);
  background: #333;
}

我们仅花费了三行代码就得到了一个完美结果：样式灵活、代码简练还具有良好的兼容性！

《CSS SECRETS》