calc()实现满屏背景定宽内容

在过去的几年间,有一种网页设计手法逐渐流行起来,我将它称作背景宽度满屏,内容宽度固定。这个设计的一些典型特征如下。 页面中包含多个大区块,每个区块都占据了整个视口的宽度,区块的背景也各不相同。 内容是定宽的,即使在不同分辨率下的宽度不一样,那也只是因为媒体查询改变了这个固定的宽度值而已。在某些情况下,不同区块的内容也可能具有不同的宽度。 有时候,整个网页都是由这种风格的多个区块组成的满屏背景的定宽内容。不过在更多的情况下,页面中只有某个特定区域是以这个风格来设计的,最典型的就是导航或页脚。 要实现这种设计风格,最常见的方法就是为每个区块准备两层元素:外层用来实现满屏的背景,内层用来实现定宽的内