Using CSS's calc() function, you can perform mathematical operations in a style sheet without JavaScript. 1. It can be used to mix different units (such as px and vh) to achieve layout adjustment, such as setting the height of the main content area to the viewport height minus the fixed head height; 2. By combining the viewport units to realize responsive spacing, reducing the use of media queries, such as the container margin changing with the screen width; 3. Support dynamic positioning elements, such as centering the prompt box or adjusting the margin of the main content area according to the sidebar width. calc() is syntax friendly and has good compatibility, and is suitable for a variety of scenarios where flexible values are required.

You don't always need JavaScript to handle dynamic sizing or positioning in CSS — the calc() function gives you a powerful way to do math right in your stylesheets. It's especially handy when you need values that depend on multiple units or changing conditions.

Here are some practical ways to use calc() effectively:

Mixing Units for Layout Adjustments

One of the most common uses is combining different units like px , em , % , and vw . This comes in handy when you want to subtract a fixed header height from a full viewport height, for example:

 .main-content {
  height: calc(100vh - 80px);
}

This makes sure your main content area fills the screen but leaves space for an 80px tall header. Without calc() , mixing those two units wouldn't be possible directly.

Use this pattern any time you're layering fixed and relative sizes — sidebars, banners, or responsive padding adjustments all benefit from it.

Responsive Spacing Without Media Queries

Instead of jumping between media queries just to adjust margins or padding, try using calc() with viewport units:

 .container {
  padding: calc(20px 2vw);
}

This increases padding slightly as the screen gets wider, keeping things visually balanced without needing to write extra breakpoints. Just make sure the math doesn't lead to overly large or small values on extreme screen sizes.

A few ideas for where this works well:

• Font sizes that scale gently with screen width
• Gaps between grid items
• Margin spacing around containers

Positioning Elements Dynamically

If you're placing something like a tooltip or dropdown menu, calc() helps align it precisely based on other known dimensions:

 .tooltip {
  left: calc(50% - 100px); /* centers a 200px wide tooltip */
}

Or if you have a fixed sidebar and want your main content to shift accordingly:

 .main {
  margin-left: calc(250px 2rem); /* sidebar width spacing */
}

These kinds of calculations keep layout relationships consistent even as you tweak other parts of the design.

It's not magic, but once you start using calc() regularly, you'll find yourself writing fewer hacks and relying less on JavaScript for layout math. The syntax is forgiving, and browser support is solid these days — so feel free to use it anywhere you need flexible values.

The above is the detailed content of Using the CSS calc() function for dynamic values. For more information, please follow other related articles on the PHP Chinese website!