使用顯示網格的額外空間

Question

我在我的頁面上添加了一些 styles。

 .container { display: grid; grid-gap: 15px; grid-template-columns: repeat(auto-fill, 300px); background:red; height:100vh }.item { border:5px solid; height:150px }

 <div class="container"> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> </div>

我想讓整個背景都塗成紅色。 為什么我在.container的底部有一些額外的空白？ 如何刪除它？

Answer 1

使用最小高度而不是高度

 .container { display: grid; grid-gap: 15px; grid-template-columns: repeat(auto-fill, 300px); background: red; min-height: 100vh }.item { border: 5px solid; height: 150px }

 <div class="container"> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> </div>

Answer 2

如果您想在整個頁面上將背景設置為紅色，您可以將紅色背景應用於正文，而不是為容器使用紅色背景。如果您需要其他內容，請告訴我。

 .container { display: grid; grid-gap: 15px; grid-template-columns: repeat(auto-fill, 300px); }.item { border:5px solid; height:15px; } body{ background:red; }

 <div class="container"> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> </div>

第二種方法是您可以使用容器的高度作為高度：-webkit-fill-available;

 .container { display: grid; grid-gap: 15px; grid-template-columns: repeat(auto-fill, 300px); height: -webkit-fill-available; background:red; }.item { border:5px solid; height:15px; }

 <div class="container"> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> <li class="item">test</li> </div>

請全屏運行這個。