Search⌘ K
AI Features

The calc() Function in CSS

Explore how the CSS calc() function enables dynamic calculation of widths and heights to build responsive layouts. Understand grouping CSS selectors to write cleaner, more efficient code and optimize your stylesheets for better performance.

Introduction

The CSS calc() function is most commonly used to calculate 100% of width and/or height, minus some specific width/height.

That’s exactly how we have used it in the example of the previous lesson’s CSS code, on line 19:

NAME_
CSS
height: calc(100% - 160px);

We’re setting the height of our <aside> and <main> elements to cover the entire height of the screen, minus the height of the <header>, the <footer>, and their vertical margins.

We have a similar scenario ...