Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Set Calc Viewport Units Workaround in CSS?
The CSS calc() function performs mathematical calculations to be used as property values. It's particularly useful for creating responsive layouts by combining different units like viewport units (vw, vh) with fixed units (px) to create workarounds for viewport-based calculations.
Syntax
selector {
property: calc(expression);
}
Supported Operations
The calc() function supports the following mathematical operations
- + Addition
- Subtraction
- * Multiplication (at least one argument must be a number)
- / Division (the right-hand side must be a number)
Important Rules
- The
+andoperators must be surrounded by whitespace. For example,calc(100%-30px)is invalid, butcalc(100% - 30px)is valid. - For
*and/operators, whitespace is not required but recommended for readability. - Division by zero results in an error.
Example 1: Width Calculation with Viewport Units
This example demonstrates using calc() to create a responsive width that combines percentage and fixed pixel values
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: skyblue;
margin: 0;
padding: 20px;
}
.container {
width: calc(90% - 90px);
border: 1px solid black;
background-color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Viewport Units Workaround with calc()</h1>
<p>This div uses calc(90% - 90px) for responsive width</p>
</div>
</body>
</html>
A centered white container with a black border appears on a sky blue background. The container's width adjusts responsively while maintaining a 90px buffer from the full percentage width.
Example 2: Font Size with Viewport Units
This example shows how to use calc() to create responsive typography that scales with the viewport
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: skyblue;
margin: 0;
padding: 20px;
}
.responsive-text {
width: calc(100% - 100px);
border: 1px solid black;
background-color: white;
padding: 30px;
text-align: center;
margin: 0 auto;
}
h1 {
color: red;
font-size: calc(1.2rem + 2vw);
margin: 0;
}
</style>
</head>
<body>
<div class="responsive-text">
<h1>Responsive Text Size</h1>
<p>The heading size scales with viewport width using calc(1.2rem + 2vw)</p>
</div>
</body>
</html>
A white container displays with a red heading that dynamically scales its font size based on the viewport width. The heading becomes larger on wider screens and smaller on narrower screens.
Browser Support
The calc() function is supported by the following browsers
- Google Chrome 1.0+
- Edge 12.0+
- Internet Explorer 11.0+
- Firefox 1.5+
- Opera 9.0+
- Safari 4.0+
Conclusion
The calc() function provides a powerful way to create responsive layouts by combining different CSS units in mathematical expressions. It's especially useful for viewport units workarounds when you need precise control over element sizing and spacing.
465 Views
