Make entire page fit the viewport [duplicate]

Question

I'm trying to get the entire site to fit the viewport so no scrolling is needed. The index, music, and contact are the main ones as the other 2 pages link to an outside source (link to the site is at the bottom of the post).

These are what I have tried and none of them have worked. Maybe I am implementing them incorrectly.

• Setting the body to max-height of 100vh didn't work. I wrapped the entire page in a div that and set it to max-height of 100vh and it didn't work either.

• This didn't work either

     html body {
     margin: 0;
     min-height: 100%;
  }
  

• Same as the option above but this time with vh instead of percentage

      html body {
     min-height: 100vh;
     position: relative; //the reason I added this one was so later on I can
                          make the footer sticky to the bottom of the page 
     margin: 0;
  }
  

• I also found a javascript that someone had tried from another question (which it would simply add css to the cover div (or for me the body tag or the div container that I have all the content wrapped in) to have a css equal to 100 viewport height and width.

  var vHeight = $(window).height(),
  vWidth = $(window).width(),
  cover = $('.cover');
  
  cover.css({"height":vHeight,"width":vWidth});
  

this did not work either.

Any hints or clues on how to achieve this?

link to the site: http://www.instastatus.live/

edit:

HTML

<div class="container-fluid">
<div class="row">
    <section id="intropage">
        <section id="container-banner">
            <div class="section first">
                <div class="cont_title">
                    <h1><a href="music.html">Music</a></h1>
                </div>
            </div>
            <div class="section">
                <div class="cont_title">
                    <h1><a href="tour.html">Tour</a></h1>
                </div>
            </div>
            <div class="section">
                <div class="cont_title">
                    <h1 class="font-weight-bold">Members<br>Only</h1>
                    <h3>Free Song<br>upon Sign-Up</h3>
                    <a href="http://www.holyrollerbaby.com/members/">
                        <button class="btn hoverable">Enter</button>
                    </a>
                </div>
            </div>
            <div class="section">
                <div class="cont_title">
                    <h1><a href="https://holyrollerbabyofficialstore.bigcartel.com/">Store</a></h1>
                </div>
            </div>
            <div class="section">
                <div class="cont_title">
                    <h1><a href="contact.html">Contact</a></h1>
                </div>
            </div>
        </section>



<div class="video-container">
    <video autoplay loop muted>
        <source src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4"
                type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="overlay-desc text-center">
        <h1 class="white-text">"Spread Your Love Around" <br>Music Video Out Now!</h1>
    </div>
    <div class="overlay-icons">
        <a href="https://www.facebook.com/holyrollerbaby/"><i class="fa fa-facebook"></i></a>
        <a href="https://www.instagram.com/holyrollerbaby/"><i class="fa fa-instagram"></i></a>
        <a href="https://www.youtube.com/channel/UC9xenomg5a4OcN0wz4X2msg?view_as=subscriber"><i class="fa fa-youtube"></i></a>
    </div>
</div>

CSS

/*===== Media ====*/
@media (max-width: 800px){
    #container-banner{
        height: 60vh;;
    }
    video{
        height: 40vh;
    }
}
@media (max-width: 640px){
    #container-banner{
        height: 70vh;;
    }
    video{
        height: 30vh;
        object-fit: cover;

    }
}
@media (width: 200px){
    #container-banner{
        height: 80vh;;
    }
    video{
        height: 20vh;
        object-fit: cover;
    }
}
    /*==== video description ===*/

.video-container {
    position: relative;

}
video {
    min-height: auto;
    vertical-align: middle;
    width: 100%;
    max-height: 50vh;
}
.overlay-desc {
    background: rgba(0,0,0,0);
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    align-items: start;
    justify-content: center;
}
.overlay-icons {
    background: rgba(0,0,0,0);
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}


    /*home page*/
#container-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    width: 100vw;
}
#container-banner:hover > .section {
    -webkit-filter: brightness(22%);
    filter: brightness(22%);
}
#container-banner:hover > .section:hover {
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
}
#container-banner .section {
    flex-grow: 1;
    position: relative;
    height: 100%;
    transition: all 0.4s;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    flex: 1;
}
#container-banner .section .cont_title {
    position: relative;
    margin: auto;
    width: 100%;
    height: auto;
    text-align: center;
    margin-top: 15vh;
}
#container-banner .section .cont_title h1 {
    text-transform: uppercase;
    color: white;
    font-family: 'Economica', sans-serif;
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
    font-size: 3.5vw;
    margin: 0;
    transition: font-size 0.3s;
    vertical-align: middle;
}
#container-banner .section .cont_title h3 {
    text-transform: uppercase;
    font-family: 'Economica', sans-serif;
    font-size: 1.3vw;
    transition: all 0.3s;
    color: white;
    letter-spacing: 3px;
    text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
}
#container-banner .section .cont_desc {
    position: relative;
    display: block;
    text-align: center;
    width: 12vw;
    height: auto;
    margin: auto;
    opacity: 0;
    transition: opacity 0.8s, padding-top 0.9s, -webkit-transform 0.7s;
    transition: opacity 0.8s, transform 0.7s, padding-top 0.9s;
    transition: opacity 0.8s, transform 0.7s, padding-top 0.9s, -webkit-transform 0.7s;
    padding-top: 6vh;
    -webkit-transform: scale(1);
    transform: scale(1);
}
#container-banner .section .cont_desc p {
    margin: 0;
    font-family: 'Economica', sans-serif;
    color: white;
    font-size: 16px;
}
#container-banner .section:hover {
    flex-grow: 1.8;
    transition: flex 0.2s;
}
#container-banner .section:hover > .cont_title h1 {
    font-size: 5.3vw;
    transition: font-size 0.4s;
}
#container-banner .section:hover > .cont_title h3 {
    font-size: 1.6vw;
    transition: all 0.4s;
}
#container-banner .section:hover > .cont_desc {
    opacity: 1;
    padding-top: 2vh;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    transition: opacity 0.7s, padding-top 0.5s, -webkit-transform 0.1s;
    transition: opacity 0.7s, padding-top 0.5s, transform 0.1s;
    transition: opacity 0.7s, padding-top 0.5s, transform 0.1s, -webkit-transform 0.1s;
    transition-delay: 0s, 0.1s, 0s;
}
#container-banner .section:nth-child(1) {
    background: url("../img/members/2nd-round.jpg") center;
}
#container-banner .section:nth-child(2) {
    background: url("../img/members/3rd-round.jpg") center;

}
#container-banner .section:nth-child(3) {
    background: url("../img/HRBAlbumCover.svg") center;
    object-fit: cover;
    -webkit-background-size: contain;
    background-size: contain;
    background-color: black;
}
#container-banner .section:nth-child(4) {
    background: url("../img/members/3.jpg") center;
}
#container-banner .section:nth-child(5) {
    background: url("../img/members/4.jpg") center;
    object-fit: cover;
}

.logo{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: 100%;
    background-image: url("../HRB Album Cover.svg");
    background-position: center;

}
.cont_title h1 a{
    color:white;
    text-decoration: none;
}
.fluidMedia {
    position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.fluidMedia iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
label{
    color: black;
}

.nav-link, .nav-item{
    font-size: 20px;
    color: var(--blue);
    font-family: ReginaBlack-Solid;
}
.regina-black-solid{
    font-family: ReginaBlack-Solid;
}


.nav-item a:hover{
    color: var(--yellow) !important;
}



.blue-text{
    color: var(--blue);
}

.yellow-text{
    color: var(--yellow);
}

Answer 1

You set your container-banner to 75vh. You can't fit the video in there with the banner taking up 75% of the screen.