Силовой контейнер css grid для заполнения полного экрана устройства

Как заставить контейнер сетки css отображать всю ширину и высоту экрана устройства для приложения с одной страницей? Модифицированный пример из документации Mozilla: Firefox

.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
}
.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  border-style: solid;
  border-color: violet;
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 3;
  grid-row: 3;
}
.five {
  border-style: solid;
  border-color: green;
  grid-column: 2;
  grid-row: 4;
}
.six {
  border-style: solid;
  border-color: purple;
  grid-column: 3;
  grid-row: 4;
}
<html>
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
</html>

Ответы

Ответ 1

Если вы воспользуетесь width: 100vw; и height: 100vh; , объект с этими стилями будет растягиваться до полной ширины и высоты устройства.

Также обратите внимание: есть время, когда добавление и поля могут быть добавлены к вашему представлению, браузерами и т.п. Я добавил * global no padding и margin, чтобы вы могли видеть разницу. Имейте это в виду.

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  width: 100vw;
  height: 100vh;
}
.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  border-style: solid;
  border-color: violet;
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 3;
  grid-row: 3;
}
.five {
  border-style: solid;
  border-color: green;
  grid-column: 2;
  grid-row: 4;
}
.six {
  border-style: solid;
  border-color: purple;
  grid-column: 3;
  grid-row: 4;
}
<html>
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
</html>

Ответ 2

Два важных свойства CSS, которые нужно установить для страниц полной высоты:

  1. Позвольте телу расти так высоко, как того требует его содержание.

    html { height: 100%; }

  2. Заставьте тело не становиться меньше, чем высота окна.

    body { min-height: 100%; }

То, что вы делаете со своей птицей, не имеет значения, если вы используете дроби или проценты, вы должны быть в безопасности во всех случаях.

Посмотрите на этот общий макет панели.

Ответ 3

Вы можете добавить position: fixed; с атрибутом top left right bottom 0, это решение работает и с более старыми браузерами.

Если вы хотите вставить его, добавьте position: absolute; к обертке и position: relative div вне обертки.

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
}
.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  border-style: solid;
  border-color: violet;
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 3;
  grid-row: 3;
}
.five {
  border-style: solid;
  border-color: green;
  grid-column: 2;
  grid-row: 4;
}
.six {
  border-style: solid;
  border-color: purple;
  grid-column: 3;
  grid-row: 4;
}
<html>
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
</html>

Ответ 4

Решение, которое я недавно нашел, состоит в том, чтобы использовать ширину 100vh и высоту 100vh для элемента body с сеткой из 9 ячеек вместо поля, центра для содержимого и остальных полей. Вы можете использовать переменную --global-margin, чтобы сделать ее более читаемой.

Ответ 5

Если вы хотите, чтобы .wrapper был полноэкранным, просто добавьте следующее в класс обертки:

position: absolute; width: 100%; height: 100%;

Вы также можете добавить top: 0 и left:0