The calc() Function in CSS

Learn to calculate the height and width of the layouts using the calc() function.

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:

Press + to interact
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 ...

Access this course and 1400+ top-rated courses and projects.