How to Set Calc Viewport Units Workaround in CSS ?

In the HTML webpage, when applying values to the CSS properties, the calculations are performed by using calc() function.

Syntax:

element {

    // CSS property
    property : calc( expression) 
}

Properties: The calc() function takes parameters in the form of a single expression. The value becomes the result of the expression. Even the expression be the combination of many operators follow the standard precedence rules.

  • + Addition
  • – Subtraction
  • * Multiplication. Any of the arguments should be a number
  • / Division. The right-hand side should be a number

One must be careful while writing the syntax and must take care of the following points.

  1. The + and operator must be surrounded by white space i.e. height(100%-30px) is considered to be invalid but height(100% – 30px) is a valid expression. For the / and * operator, the white spacing is not necessary but is highly recommended.
  2. Division by 0 results in an error.

Example 1:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>
        CSS Calc Viewport Units Workaround
    </title>
      
    <style>
        body {
            background-color: rgb(30, 240, 30);
        }
  
        h1 {
            color: rgb(30, 240, 30);
        }
  
        div {
            width: calc(100% - 100px);
  
            /* Using the calc() func to change the 
               width of the div element by 100px */
            border: 1px solid black;
            background-color: white;
            margin-top: 50px;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div>
        <h1>working of the calc() function</h1>
    </div>
</body>
  
</html>

chevron_right


output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <title>
        CSS Calc Viewport Units Workaround
    </title>
  
    <style>
        body {
            background-color: rgb(30, 240, 30);
        }
  
        h1 {
            color: rgb(30, 240, 30);
  
            /* Using the calc() func to change 
            the font size of the h1 element */
            font-size: calc(1.5rem + 3vw);
        }
  
        div {
            width: calc(100% - 100px);
            border: 1px solid black;
            background-color: white;
            margin-top: 50px;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div>
        <h1> working of the calc() function</h1>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.