How to make a div with height and width of the user’s screen

In this article we will learn how to create a div with height and width of the user’s screen, being responsive to the most different screens applying simple CSS rules.

Hey you programmer, okay? Let’s learn something new?

Today responsiveness is a good and high subject, we always want to adapt our websites and apps to the user’s device

Then there is a need to do this filling for the entire screen, that is, having a div with a width and height that adapts to any monitor

We can do this easily applying CSS, we just need to use the height and width properties with special values

Instead of px, em, rem or pt we will use vh and vw

• vh: view height, that is, the height of the user’s view (screen);
• vw: view width, that is, the total width of the user’s view (screen);

Check out this example:

.container {
 height: 100vh;
 width: 100vw;
}

In this example, the container will have 100% of the height and width of the user’s screen

And that means filling the screen completely, and thus completing our goal.

And of course we can use these values with other numbers

For example: half screen 50vw

This will work too and you should use it as needed.

Conclusion

In this article we learned a way to make a div with height and width of the user’s screen.

Both in width and in height with the vh (view height) and vw (view width) property values

We use the known height and width properties, setting the value 100vh and 100vw respectively

Want to learn more about HTML and CSS? Click here