CSS gets the height of the current visual screen -- use the calc() method to dynamically calculate the width or height

First understand the relative length unit and absolute length unit of CSS3 (refer to the detailed tutorial ):

relative length unit

Relative length units specify the properties of one length relative to another. It is more suitable for different relative lengths of equipment.

unit	describe
em	It is described relative to the font size applied to the current element, so it is also a relative length unit. The default font size of general browsers is 16px, then 2em == 32px;
ex	Depends on the height of the small x of the English letter;
ch	the width of the number 0;
rem	rem is the abbreviation of root em (root em). When rem acts on a non-root element, it is relative to the font size of the root element; when rem acts on the font size of the root element, it is relative to its initial font size;
vw	viewpoint width, window width, 1vw=1% of window width;
vh	viewpoint height, the height of the window, 1vh=1% of the height of the window;
min	the smaller of vw and vh;
vmax	The larger of vw and vh.

absolute unit of length

An absolute unit of length is a fixed value that reflects a real physical size. Absolute length units depend on the output medium and do not depend on the environment (monitor, resolution, operating system, etc.).

px	Pixel (1px = 1/96th of 1in)
in	inches (1in = 96px = 2.54cm)
cm	centimeter
mm	mm

We can get the window height/width of the current screen through vh / vw, so in css, by calculating this height, the height of the div can be automatically stretched to the height of the screen. To calculate this height, you can use the calc() function of css3 (refer to the detailed tutorial ):

Definition and usage of calc() function:

The calc() function is used to dynamically calculate the length value. It should be noted that:

• A space needs to be reserved 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 rules of precedence for mathematical operations;

Use the real column:

1. Set the height and width of the div to be full screen:

Method 1: height:100vh; width: 100vw;

<div class="div">一些文本...</div>

<style>
 .div {
    
    
	height:100vh;
    width: 100vw;
    position: absolute;
    left: 50px;
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
 }
</style>

Method 2: width: calc(100%); height: calc(100%);

<div class="div">一些文本...</div>

<style>
 .div {
    
    
	width: calc(100%);
	height:calc(100%);
    position: absolute;
    left: 50px;
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
 }
</style>

2. Customize the height and width of the div: calc(expression)

expression: must be a mathematical expression, and the result will be the return value after the operation.

<div class="div">一些文本...</div>

<style>
 .div {
    
    
    //width: calc(50%*2);
	//height:calc(40%+50px);
	width: calc(100%/6);
	height:calc(100%-50px);
    position: absolute;
    left: 50px;
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
 }
</style>