在不使用 vh 單位的情況下，使 div 成為剩余空間高度的視口的完整高度

Question

如何使 grid-container div class 具有 nav 標簽未使用的 body 剩余空間的高度？

 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>

我嘗試將網格容器的高度設置為 100%，但高度與剩下的高度不同。 我試過100vh，但是內容溢出了。 這怎么能解決？ 這個問題可以用一點 CSS 來解決嗎？

Answer 1

您可以通過使用 CSS 彈性框布局來實現

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>