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 ?
How to change top address bar color in mobile web browsers - CSS
Set CSS/HTML opacity - transparent background but not text
Trending questions
Is PLS LCD display good ? Difference between PLS LCD and Amoled How to calculate inverse currency exchange rate ? Remove or hide bottom navigation bar with buttons on Android Samsung Galaxy A & F better than M series ? What's the difference ? Man Month calculation - how many man days or man hours ? How to add side by side rows in excel pivot table ? How to change QWERTZ keyboard to QWERTY in Windows 10 ?
Is PLS LCD display good ? Difference between PLS LCD and Amoled How to calculate inverse currency exchange rate ? Remove or hide bottom navigation bar with buttons on Android Samsung Galaxy A & F better than M series ? What's the difference ? Man Month calculation - how many man days or man hours ? How to add side by side rows in excel pivot table ? How to change QWERTZ keyboard to QWERTY in Windows 10 ?
2024 AnswerTabsTermsContact us