Course Content
CSS Basic
0/1
CSS Selectors
0/1
CSS Comments
0/1
CSS Backgrounds
0/1
CSS Borders
0/1
CSS Outline
0/1
CSS Fonts
0/1
CSS Height and Width
0/1
CSS Margins and Paddings
0/2
CSS Icons
0/1
CSS Links
0/1
CSS Lists
0/1
CSS Tables
0/1
CSS Display Properties
0/1
CSS Max-Width Property
0/1
CSS Positioning Elements
0/1
CSS Z-Index Property
0/1
CSS Overflow
0/1
CSS Float
0/1
CSS Opacity
0/1
CSS Forms
0/1
CSS Dropdowns
0/1
CSS Buttons
0/1
CSS Media Queries
0/1
About Lesson

The calc() function is used to perform calculations in CSS. It allows you to combine different units (like percentages, pixels, em, etc.) and perform arithmetic operations (+, -, *, /) to create dynamic layouts.

Syntax:

CSS
width: calc(100% - 50px);

Example:

You might use calc() to set the width of an element based on the viewport size, but subtract some fixed value like a sidebar width:

CSS
.main {
  width: calc(100% - 200px); /* 100% width minus 200px */
}