Utilizing min-height: 100vh; in my inner call to action div placed on top of a background video has been mostly successful. However, I've encountered an issue where using 100vh with the absolutely positioned video seems to introduce an unwanted margin to the section.
Is there a way to maintain 100vh on the section without the additional margin? I've experimented with calc but it proves to be problematic with responsive design and mobile devices.
CSS
...
.video-wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
.video-background {
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
}
}
.content-wrapper {
@include media-breakpoint-up(xs) {
display: flex;
flex-direction: column;
min-height: 100%;
padding: 0;
margin: 0;
}
}
...
.section-call-to-action {
@include media-breakpoint-up(xs) {
min-height: 100vh;
padding: 0;
margin: 0;
.row {
margin: 0;
padding: 0;
}
}
...
HTML
<div class="video-wrapper">
<video autoplay="" class="video-background" loop="" muted="" playsinline="">
<source src="..." type="video/mp4">
</video>
</div>
<main class="container-fluid content-wrapper">
<section class="container-fluid d-flex flex-column flex-fill justify-content-center section-call-to-action">
</section>
<section class="container-fluid d-flex flex-column section-venn-wrapper">
</section>
<section class="container-fluid section-robot-friends">
</section>
</main>
https://i.sstatic.net/30xIa.png
UPDATE
- I attempted to use
min-height: calc(100vh - 5rem);and it worked in Chrome on desktop but not Safari on iOS. - I came across the https://github.com/Hiswe/vh-check library, but I am aiming to solve this issue using only CSS.
- I also tested out iOS CSS but it did not yield successful results on iPads.
@supports (-webkit-overflow-scrolling: touch) {
min-height: calc(100vh - 200px);
}