CSS uses calc() to obtain the current visible screen height

First, let's take a look at the relative length units of CSS3 (refer to the detailed tutorial):

Relative length units specify the property of one length relative to another length. Relative lengths are more applicable to different devices.

It can be seen that through vh / vw we can get the current screen window width, so in CSS, by calculating this height, the height of the div can be automatically expanded to the screen height. To calculate this height, you can use the calc() function of CSS3 (refer to the detailed tutorial):

The calc() function is used to dynamically calculate the length value.

• It should be noted that a space is required before and after the operator, for example: width: calc(100% - 10px);
• Any length value can be calculated using the calc() function;
• The calc() function supports "+", "-", "*", "/" operations;
• The calc() function uses standard mathematical operation precedence rules;

So, just set the height of the div to calc(100vh) , 100vh = 100% of the window height, example:

div {
  width: 100%;
  height: calc(100vh);
}

It should be noted that this method is suitable for the web page height being equal to the current screen window height, and JS may still be required according to actual needs.

This is the end of this article about how to use calc() in CSS to get the current visible screen height. For more information about how to use calc() in CSS to get the current screen height, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!