Meaning of VH and VW in CSS - difference between VH, VW, %, PX
What is the difference between VH, VW, % and PX in CSS ? What does VH and VW do ?
Hi,
All of them VH, VW, % and PX are units for expressing a length in CSS. Both VH (viewport height) and VW (viewport width) are relative length units.
1 viewport unit is relative to 1% of the width or height of the viewport.
For example, when the height is set to 100vh, it is equal to 100% of the viewport height:
<style>
body {
padding: 0px;
margin: 0px;
}
.content {
height: 100vh;
width: 100%;
background-color: aqua;
}
</style>
<body>
<div class='content'>Text</div>
</body>
All of them VH, VW, % and PX are units for expressing a length in CSS. Both VH (viewport height) and VW (viewport width) are relative length units.
1 viewport unit is relative to 1% of the width or height of the viewport.
For example, when the height is set to 100vh, it is equal to 100% of the viewport height:
<style>
body {
padding: 0px;
margin: 0px;
}
.content {
height: 100vh;
width: 100%;
background-color: aqua;
}
</style>
<body>
<div class='content'>Text</div>
</body>
Related questions
Different background color for Odd / Even table rows - CSS
CSS font-size units PX to PT, IN, EM, REM conversion
Smooth move of HTML elements - animation with CSS
Full screen Not Clickable overlapping layer / overlay - CSS
How to change Checkbox to Toggle slider button using CSS ?
Set CSS/HTML opacity - transparent background but not text
Resize / shrink top navigation menu bar on Scroll in Javascript
Trending questions
How to calculate inverse currency exchange rate ? Remove or hide bottom navigation bar with buttons on Android How to add side by side rows in excel pivot table ? How to change QWERTZ keyboard to QWERTY in Windows 10 ? Best free attractions in London - free things to do in London How to calculate how many Man Days are 3 Man Hours ? Man Month calculation - how many man days or man hours ?
How to calculate inverse currency exchange rate ? Remove or hide bottom navigation bar with buttons on Android How to add side by side rows in excel pivot table ? How to change QWERTZ keyboard to QWERTY in Windows 10 ? Best free attractions in London - free things to do in London How to calculate how many Man Days are 3 Man Hours ? Man Month calculation - how many man days or man hours ?
Follow us on Facebook
2022 AnswerTabsTermsContact us