calc() to achieve full screen background fixed width content

Over the past few years, there has been a trend in web design that I call full-width background and fixed-width content. Some typical features of this design are as follows.

The page contains multiple large blocks, each of which occupies the entire width of the viewport and has a different background.

The content is fixed width, even if the width is different at different resolutions, it is only because the media query changes this fixed width value. In some cases, content in different blocks may also have different widths.

Sometimes, the entire web page is a fixed-width content that fills the entire screen background and is composed of multiple blocks of this style. However, in more cases, only a specific area of ​​the page is designed in this style, the most typical being the navigation or footer.

To achieve this design style, the most common method is to prepare two layers of elements for each block: the outer layer is used to achieve the full-screen background, and the inner layer is used to achieve the fixed-width content. The latter is horizontally centered through margin: auto. For example, a footer using this design would typically have the structure code written as:

<footer>
<div class="wrapper">
<!-- Footer content goes here-->
</div>
</footer>

Use CSS to style these two layers of elements at the same time:

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

Looks familiar, right? Currently, most front-end engineers write like this. Is it necessary to add an extra layer of element to achieve this effect? Can we get rid of this clutter entirely with the help of modern CSS?

Let’s first think about what role margin: auto plays in this scenario. The left and right margins created by this declaration are actually equal to half the viewport width minus half the content width. Since percentages are interpreted here based on the viewport width (assuming no ancestor elements have an explicit width), we can express this margin value as 50% – 450px. Fortunately, CSS3 defines such a calc() function, which allows us to specify the value of the property directly in CSS using this simple formula. If calc() is used instead of auto, the style of this inner container will become:

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

The only reason to add a container element inside the footer is to assign the magical auto keyword to its margin, so as to achieve horizontal centering of the content. However, now we have replaced this magical auto with calc(), and this new value can actually be applied as a generic CSS length value to any property that accepts a length value. This means that if we want, we can also apply this length value to the parent element's padding, and the overall effect will remain unchanged:

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

After this transformation, we have stripped away all the CSS code on the inner container. In other words, it doesn't actually need to participate in layout, and we can safely remove it from the structure code. Finally, we have achieved the desired design style on a pure and non-redundant HTML structure. Is there room for further optimization of this solution? That's right. You must believe that the pursuit of excellence is endless!

If you comment out the width declaration, you'll find that it has no effect. The visual effect is exactly the same, regardless of the viewport size. Why is this? Because when the padding is 50% – 450px, only 900px (2×450px) of available space is left for the content. Only if we explicitly set width to something other than 900px (or larger or smaller) will we be able to see a difference. Since the content width we want is 900px, this line of declaration is actually redundant. We can remove it to make the code more concise.

Another area that can be optimized is that we can add a fallback style to enhance backward compatibility. This way, even if the browser doesn't support calc(), we can at least get a relatively reasonable padding:

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

Finally it’s done. We abandoned redundant tags, spent three lines of CSS code, and finally achieved this perfect result: flexible style, concise code, and good compatibility!

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.