CSS calc()
You can use the CSS calc(expression) function to dynamically calculate the CSS props of the elements. You can mix the units inside. This feature is especially useful when combined with…
Dynamic CSS properties with calc() function
You can use the CSS calc(expression) function to dynamically calculate the CSS props of the elements. You can mix the units inside. This feature is especially useful when combined with CSS variables.
css
/* Dynamic dimensions of the page content based on footer and sidebar*/
:host {
--sidebar-width: 200px;
--footer-height: 300px;
}
.content {
height: calc(100% - var(--footer-height));
width: calc(100% - var(--sidebar-width));
}
.footer {
height: var(--footer-height);
}
.sidebar {
width: var(--sidebar-width);
}Here are a few more examples
css
/* Dynamic element width */
.element {
width: calc(100% - var(--gap-width) / 2);
}
/* Static size ratio */
.container {
width: 50%;
height: calc(50% * 0.75); /* Maintain 4:3 aspect ratio */
}
/* Dynamic size calculation based on different units */
.some-section {
height: calc(100% - 2em);
}
/* Complex calc for page elements */
.complex {
height: calc(100% - var(--header-height) - var(--footer-height) - var(--gap-height) * 2);
}
/* ... whatever else you need */
