الدالة calc() في CSS تجري عمليات حسابية على قيم الخصائص: جمع وطرح وضرب وقسمة. وميزتها أنها تجمع وحدات مختلفة معًا.

.sidebar-content {
  width: calc(100% - 250px);
}

هنا يأخذ العنصر كامل العرض ناقص 250 بكسل للشريط الجانبي، مهما كان حجم الشاشة.

أمثلة أخرى

.hero { height: calc(100vh - 64px); }      /* full screen minus header */
h1 { font-size: calc(1.5rem + 2vw); }      /* grows with the screen */

انتبه

ضع مسافة حول + و-: calc(100% - 20px) صحيح، وcalc(100%-20px) لا يعمل.