HuntExams Academy
HTML/CSSIntermediate#css#functions

How does the CSS calc() function work?

calc() lets you mix units and perform arithmetic (+, -, *, /) directly in a CSS value, useful for responsive layouts that need a fixed offset combined with a percentage/viewport unit.

Example
.sidebar { width: calc(100% - 250px); }
.hero { height: calc(100vh - 64px); } /* subtract fixed header height */

Related Questions

1
HTML/CSSAdvanced#css#functions

What is the difference between min(), max(), and clamp() in CSS?

Open
2
HTML/CSSBeginner#css#overflow

What is the difference between overflow: visible, hidden, scroll, and auto?

Open
3
HTML/CSSIntermediate#css#units

What is the difference between em and rem when nesting components?

Open