CSS achieves highly adaptive full screen

When writing my own demo, I want to use display:flex to achieve vertical centering. The code is as follows:

<style>
    #login{
        width:100%;
        height: 100%;
        display: flex; 
        justify-content: center;
        align-items: center;
    }
    .login-body{
        width: 600px;
        height: 260px;
        border: 1px solid #000;
    }
</style>

It does not achieve the effect I want, the height of the outer parent element does not fill the entire screen. .

Solution: Give #login a min-height: 100vh, and use display: flex; justify-content: center; align-items: center; to achieve vertical centering.

<style>
    #login{
        width:100%;
        min-height: 100vh;
        display: flex; 
        justify-content: center;
        align-items: center;
    }
    .login-body{
        width: 600px;
        height: 260px;
        border: 1px solid #000;
    }
</style> 

Viewport units

What is a viewport?

On the desktop, the viewport refers to the visible area of ​​the browser; on the mobile side, it involves 3 viewports: Layout Viewport, Visual Viewport, and Ideal Viewport.

The "viewport" in the viewport unit refers to the visible area of ​​the browser on the desktop; on the mobile side it refers to the Layout Viewport in the Viewport, and the "viewport" refers to the size of the visible area inside the browser, that is, the size of window.innerWidth/window.innerHeight, which does not include the browser area size of the taskbar, title bar, and bottom toolbar. .

According to the CSS3 specification, viewport units mainly include the following 4:

1.vw: 1vw is equal to 1% of the viewport width, and the viewport width is 100vw.

2.vh: 1vh is equal to 1% of the viewport height, and the viewport height is 100Vh.

3.vmin: Select the smallest one between vw and vh.

4.vmax: Select the largest one between vw and vh.

This is the end of this article about how to use CSS to achieve highly adaptive content that fills the entire screen. For more relevant CSS highly adaptive content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!