Search code examples
htmlcssoverflow

Make div the full height of the viewport left over space height without using vh units


How to make the grid-container div class have the height of the leftover space of the body that is not used by the nav tag?

html {
    height: 100%;
  }

  body {
    min-height: 100%;
  }

li {
    display: inline-block;
    margin-left: 10em;
}

.link_item {
    color: rgb(33, 37, 41) !important;
    text-decoration: none !important;
}

nav {
    box-shadow: 0 12.5px 10px -10px rgb(204, 204, 204);
    margin-bottom: 0;
}

ol {
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
}

video {
    margin-top: -15px;
}

.typewrite { color:rgb(255, 255, 255); text-decoration: none;}

.typewrite_parent {
    position: absolute;
    top: 350px;
    left: 100px;
}

.grid-container {
    height: 100%;
    margin-top: -15px;
    display: grid;
    grid-template-columns: 33.3333333333% 33.3333333333% 33.3333333333%;
    grid-template-rows: 48% 52%;
}

.product {
    width: 100%;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 2rem;
    min-height: 100%;
}

.img1 {
    background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://imageengine.victorinox.com/medias/?context=bWFzdGVyfHJvb3R8OTc5NDF8aW1hZ2UvanBlZ3xoMjkvaGQ4LzEzNTE5MTQyNzQ4MTkwL25hdi1jYXJwZXQtd2F0LW1hdmVyaWNrLTY0MHgzNTAuanBnfDU1OGRlNzRmNjE5ZGEzNWI3MjlhN2I3ZWYxNmYzNzZhNDM0MGIwZDI4YTdmZjM0NTVlN2YwNDVlOWRiZTE1YjM);
    background-size: cover;
}

.img2 {
    background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://as01.epimg.net/meristation/imagenes/2020/08/06/noticias/1596694952_786263_1596695043_noticia_normal.jpg);
    background-size: cover;
}

.img3 {
    background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://dynaimage.cdn.cnn.com/cnn/c_fill,g_auto,w_1200,h_675,ar_16:9/https%3A%2F%2Fcdn.cnn.com%2Fcnnnext%2Fdam%2Fassets%2F160504154606-one-trillion-dollar.jpg);
    background-size: cover;
}

.img4 {
    background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://primeambassador.com/assets/images/share/mens-watches.jpg);
    background-size: cover;
}

.img5 {
    background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://www.apple.com/newsroom/images/product/airpods/standard/Apple-AirPods-Pro-2nd-gen-hero-220907.jpg.news_app_ed.jpg);
    background-size: cover;
}

.img6 {
    background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://img.freepik.com/premium-vector/fashion-trendy-female-clothes-accessories-stylish-outfits-vector-set_519741-65.jpg?w=2000);
    background-size: cover;
}
    <nav>
        <ol>
            <li class="navbar-brand">
                <a href="./index.html" class="link_item" ><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Adidas_Logo.svg/2560px-Adidas_Logo.svg.png" width="30" height="30" class="d-inline-block align-top" alt="">
                Miscellaneous</a>
            </li>
            <li><a class="link_item" href="./index.html">Inicio</a></li>
            <li><a class="link_item" href="./productos.html">Productos</a></li>
            <li>Sobre Nosotros</li>
        </ol>
    </nav>
    <div class="grid-container">
        <div class="grid-item img1">Pulseras</div>
        <div class="grid-item img2">Códigos de Xbox Live Gold</div>
        <div class="grid-item img3">Billetes Zimbabwe</div>
        <div class="grid-item img4">Relojes</div>
        <div class="grid-item img5">Audifonos</div>
        <div class="grid-item img6">Ropa</div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

I tried setting the height of the grid-container to 100%, but the height was different from the leftover one. I tried 100vh, but the content overflows. How can this be fixed? Could this problem be solved with a bit of CSS?


Solution

  • you can achieve by using CSS flex box layout

    html {
      display: flex;
      height: 100%;
    }
    
    body {
      flex: 1;
      display: flex;
      flex-direction: column;
      
    }
    
    grid-container {
      margin-top: -15px;
      display: grid;
      grid-template-columns: 33.3333333333% 33.3333333333% 33.3333333333%;
      grid-template-rows: 48% 52%;
      flex-grow: 1;
    }
    

    html {
        height: 100%;
        display: flex;
      }
    
      body {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
    
    li {
        display: inline-block;
        margin-left: 10em;
    }
    
    .link_item {
        color: rgb(33, 37, 41) !important;
        text-decoration: none !important;
    }
    
    nav {
        box-shadow: 0 12.5px 10px -10px rgb(204, 204, 204);
        margin-bottom: 0;
    }
    
    ol {
        padding-top: 0.9rem !important;
        padding-bottom: 0.9rem !important;
    }
    
    video {
        margin-top: -15px;
    }
    
    .typewrite { color:rgb(255, 255, 255); text-decoration: none;}
    
    .typewrite_parent {
        position: absolute;
        top: 350px;
        left: 100px;
    }
    
    .grid-container {
        height: 100%;
        margin-top: -15px;
        display: grid;
        grid-template-columns: 33.3333333333% 33.3333333333% 33.3333333333%;
        grid-template-rows: 48% 52%;
        flex-grow: 1;
    }
    
    .product {
        width: 100%;
    }
    
    .grid-item {
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgb(255, 255, 255);
        font-weight: bold;
        font-size: 2rem;
        min-height: 100%;
    }
    
    .img1 {
        background-image: 
        linear-gradient(
          rgba(0, 0, 0, 0.5),
          rgba(0, 0, 0, 0.5)
        ),
        url(https://imageengine.victorinox.com/medias/?context=bWFzdGVyfHJvb3R8OTc5NDF8aW1hZ2UvanBlZ3xoMjkvaGQ4LzEzNTE5MTQyNzQ4MTkwL25hdi1jYXJwZXQtd2F0LW1hdmVyaWNrLTY0MHgzNTAuanBnfDU1OGRlNzRmNjE5ZGEzNWI3MjlhN2I3ZWYxNmYzNzZhNDM0MGIwZDI4YTdmZjM0NTVlN2YwNDVlOWRiZTE1YjM);
        background-size: cover;
    }
    
    .img2 {
        background-image: 
        linear-gradient(
          rgba(0, 0, 0, 0.5),
          rgba(0, 0, 0, 0.5)
        ),
        url(https://as01.epimg.net/meristation/imagenes/2020/08/06/noticias/1596694952_786263_1596695043_noticia_normal.jpg);
        background-size: cover;
    }
    
    .img3 {
        background-image: 
        linear-gradient(
          rgba(0, 0, 0, 0.5),
          rgba(0, 0, 0, 0.5)
        ),
        url(https://dynaimage.cdn.cnn.com/cnn/c_fill,g_auto,w_1200,h_675,ar_16:9/https%3A%2F%2Fcdn.cnn.com%2Fcnnnext%2Fdam%2Fassets%2F160504154606-one-trillion-dollar.jpg);
        background-size: cover;
    }
    
    .img4 {
        background-image: 
        linear-gradient(
          rgba(0, 0, 0, 0.5),
          rgba(0, 0, 0, 0.5)
        ),
        url(https://primeambassador.com/assets/images/share/mens-watches.jpg);
        background-size: cover;
    }
    
    .img5 {
        background-image: 
        linear-gradient(
          rgba(0, 0, 0, 0.5),
          rgba(0, 0, 0, 0.5)
        ),
        url(https://www.apple.com/newsroom/images/product/airpods/standard/Apple-AirPods-Pro-2nd-gen-hero-220907.jpg.news_app_ed.jpg);
        background-size: cover;
    }
    
    .img6 {
        background-image: 
        linear-gradient(
          rgba(0, 0, 0, 0.5),
          rgba(0, 0, 0, 0.5)
        ),
        url(https://img.freepik.com/premium-vector/fashion-trendy-female-clothes-accessories-stylish-outfits-vector-set_519741-65.jpg?w=2000);
        background-size: cover;
    }
        <nav>
            <ol>
                <li class="navbar-brand">
                    <a href="./index.html" class="link_item" ><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Adidas_Logo.svg/2560px-Adidas_Logo.svg.png" width="30" height="30" class="d-inline-block align-top" alt="">
                    Miscellaneous</a>
                </li>
                <li><a class="link_item" href="./index.html">Inicio</a></li>
                <li><a class="link_item" href="./productos.html">Productos</a></li>
                <li>Sobre Nosotros</li>
            </ol>
        </nav>
        <div class="grid-container">
            <div class="grid-item img1">Pulseras</div>
            <div class="grid-item img2">Códigos de Xbox Live Gold</div>
            <div class="grid-item img3">Billetes Zimbabwe</div>
            <div class="grid-item img4">Relojes</div>
            <div class="grid-item img5">Audifonos</div>
            <div class="grid-item img6">Ropa</div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>