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

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://cdn.cnn.com/cnnnext/dam/assets/160504154606-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 >
                <a href="./index.html"  ><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Adidas_Logo.svg/2560px-Adidas_Logo.svg.png" width="30" height="30"  alt="">
                Miscellaneous</a>
            </li>
            <li><a  href="./index.html">Inicio</a></li>
            <li><a  href="./productos.html">Productos</a></li>
            <li>Sobre Nosotros</li>
        </ol>
    </nav>
    <div >
        <div >Pulseras</div>
        <div >Códigos de Xbox Live Gold</div>
        <div >Billetes Zimbabwe</div>
        <div >Relojes</div>
        <div >Audifonos</div>
        <div >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?

CodePudding user response：

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://cdn.cnn.com/cnnnext/dam/assets/160504154606-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 >
                <a href="./index.html"  ><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Adidas_Logo.svg/2560px-Adidas_Logo.svg.png" width="30" height="30"  alt="">
                Miscellaneous</a>
            </li>
            <li><a  href="./index.html">Inicio</a></li>
            <li><a  href="./productos.html">Productos</a></li>
            <li>Sobre Nosotros</li>
        </ol>
    </nav>
    <div >
        <div >Pulseras</div>
        <div >Códigos de Xbox Live Gold</div>
        <div >Billetes Zimbabwe</div>
        <div >Relojes</div>
        <div >Audifonos</div>
        <div >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>