Дополнительное пространство с использованием сетки отображения

Question

Я добавляю несколько стилей на свою страницу.

.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);
      
}
.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>

Второй метод заключается в том, что вы можете использовать высоту контейнера как height: -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>

Пожалуйста, запустите это в полноэкранном режиме.

Answer 2

используйте минимальную высоту вместо высоты

.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>