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
.
body,
html {
height: 100%;
}
.parent {
background: lightblue;
float: left;
height: 200px;
padding: 10px;
width: 50px;
}
.child {
background: pink;
height: 100%;
width: 100%;
}
.viewport-height {
background: gray;
float: right;
height: 100vh;
width: 50px;
}
<div class="parent">
<div class="child">
100% height
(parent is 200px)
</div>
</div>
<div class="viewport-height">
100vh height
</div>