Home / Web Development / CSS / Difference between vh/vw and % – CSS

Difference between vh/vw and % – CSS

Here I just share new and uncommon CSS unit to web application. CSS3 introduce new CSS units. We are familure with px,%,rem and em. But we discuss new units like vh and vh.
To fit the design in view port developed by javascript. But solving this problem, in css we simply add width and height with vw and vh respectively.

Units and Description

Units Description
vw Relative to 1% of the width of the browser window size. It is relative to viewport width.
vh Relative to 1% of the height of the browser window size. It is relative to viewport height.

In vh and vw first check the size of the viewport, then resize any elements on the page accordingly. If the user resizes the browser then the script runs again to resize the elements on the page.

100% can be 100% of the height of anything. For example, if I have a parent div that’s 1000px tall, and a child div that is at 100% height, then that child div could theoretically be much taller than the height of the viewport, or much smaller than the height of the viewport, even though that div is set at 100% height.

If I instead make that child div set at 100vh, then it’ll only fill up 100% of the height of the viewport, and not necessarily the parent div

Simple Example

SUMMARY: The vw/vh, we can size elements to be relative to the size of the viewport.
Happy Coding

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.

Leave a Reply

Your email address will not be published. Required fields are marked *

Social Media Auto Publish Powered By : XYZScripts.com