Let’s see how to make a div full screen using CSS on any screen. You probably have tried :

div {
    height: 100%;
    width: 100%;
}

Unfortunately, you still end with a div not perfectly sized to your full screen. When you use percentage in CSS, the code tries to catch the parent element’s size, here body, but it’s not defined by default, so you’ll end up with something imperfect.

The good news, there is a specific attribute we can use to make our div full screen in CSS.

The viewport attribute

The viewport size depends on the size of the fullscreen. When the height or width of the screen is changed, everything is scaled accordingly. There is 4 units that we can use with viewport :

• vh (viewport height)
• vw (viewport width),
• vmin (viewport minimum length)
• vmax (viewport maximum length)

With this new attribute, to have a div full screen with CSS :

div {
    height: 100vh;
    width: 100vw;
}

Note that all major browsers support viewport.