Difference between vh and % - css

Question

Why In the code below if I change
(height from vh to %) following change occur:
.banner {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background.jpg);
background-size: cover;
background-position: center;
}
.banner {
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background.jpg);
background-size: cover;
background-position: center;
}
At banners height 100vh
before
At banners height 100%
At 100%
Why there is difference, as the 100% means the 100 percent of container. And here container is div(class banner) And it occupy the full page.
Is it possible to make same webpage with 100% height of banner?

Answer 1

VH gives height as screen size
100% returns the height of the found parent element.
.banner {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
margin-bottom:1rem;
}
header{
height:100px;
}
.banner2 {
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
}
<div class="banner"></div>
<header>
<div class="banner2"></div>
</header>

Answer 2

Difference between % and vh :-
height: 100vh;
Example: If your device's viewport size is 1366 x 786px, the element considers the height as "786px" which means it occupies the full viewport height of the screen.
height: 100%;
Example: This depends on the parent element. It occupies the full height of the parent element.
Hope this helps. #AmirSaudagar