Using CSS Calc() to Dynamically Define an Element's Size️ Without JavaScript
Last Updated -
The modern web is a flexible experience with so many screen sizes and devices to support. This means fluid, responsive designs are a requirement. The CSS calc() make it much easier to build fluid, responsive layouts. 
This can lead to a sticky situation if you want an element to naturally resize as its parent element or window dimensions change. In the past this was pretty hard to implement and generally would require some sort of JavaScript listening to the browser's resize event.
Today modern browsers all support the CSS calc function.
Yes, a function in CSS!
You place some sort of mathematical equation in the function and the browser will automatically calculate an updated property value as the screen size changes.
The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.
You can also mix units, like pixels with percentages, ems, rems, vw, vh etc.
Here is a simple example:
.item{ width: calc(100% - 60px); height: calc(100% - 60px); } Here is a common situation I find and how calc() can help solve the dynamic layout issues.
Let's take a header where the logo is a known width, let's say 100 pixels.
There is content to the logo's right, the site menu or some sort of title or tag line text.
You want the right-side content to shrink and expand, while keeping the logo fixed. How do you ensure you are not wasting available space with that right-side content? The calc() method to the rescue.
.right-side-header-content{ width: calc(100% - 100px); } Here you can see the CSS width property is set using the calc method.
I want the element to be as wide as possible, which would be 100% if the logo was not present.
Since I know the logo's width (100 pixels) I can subtract 100px from the 100% width.
The right side content will stretch to fit the remaining space.
The CSS Calc Function Helps Fluid Layouts
I want to make a note you need to know how large the actual box is for the fixed size element. Margins do play a part here.
If the logo has a left and right margin of 10 pixels I would need to subtract 120 pixels from 100%. I have a simple example/demo available on jsFiddle.net.
Another point I want to make is to make sure you track the fixed dimension elements in the layout.
In a responsive design I may have the logo fixed at 100 pixels when the browser Viewport width is greater than 1000 pixels, but 75 pixels above 600 pixels and 50 pixels below 600 pixels.
This means I need to correctly set rules inside corresponding media queries to adjust the calc() method.
@media(min-width: 600px){ .right-side-header-content{ width: calc(100% - 75px); } } Note how you are able to still leverage inside a media query. This makes it easier to design great responsive layouts.
Summary
The CSS calc() method is a simple little trick to help you make nice fluid, responsive web designs for your modern web applications.
