Как растянуть блок по высоте окна?

Question

Задача, сделать 5 блоков, высота каждого 1 окно. Кода пока нет, тк не разобрался пока с этим. Но суть в том, что: будет блок "приветствия", после него, также размером в 1 окно, и так далее. На картинке будет яснее

Блоки разных цветов на картинке, предполагаются размером в 1 окно

Answer 1

Чтобы сделать высоту блока равной высоте окна устройства, укажите высоту в единицах vh:

height: 100vh;

Подробнее: Относительные единицы измерения vh, vw, vmin, vmax

Answer 2

Могу предположить, что вы планируете это:

* {margin: 0; padding: 0; box-sizing: border-box;}

.container {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
}

section {
  scroll-snap-align: start;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h2 {font-size: 4vw; color: white; font-weight: normal; font-family: sans-serif; color: white;}

section:nth-child(1) {background-color: black;}
section:nth-child(2) {background-color: dimgray;}
section:nth-child(3) {background-color: darkgray;}
section:nth-child(4) {background-color: darkslategray;}
section:nth-child(5) {background-color: slategray;}

/* Иконка */
.mouse {
  opacity: 0.5;
  position: absolute;
  bottom: 30px;
  width: 24px;
  height: 38px;
  left: 50%;
  margin-left: -12px;
  border: 1px solid white;
  border-radius: 15px;
}

.mouse:before {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 50%;
  margin: 0 0 0 -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: white;
  animation: scroll 1.5s linear 0s infinite normal none;
}

@keyframes scroll {
  0% {transform: translate3d(0, 0px, 0); opacity: 1;}
  35% {transform: translate3d(0, 7px, 0); opacity: 1;}
  50% {transform: translate3d(0, 10px, 0); opacity: 0;}
  80% {transform: translate3d(0, 0, 0); opacity: 0;}
}

<div class="container">
  <section><h2>Привет. Это секция 1</h2><div class="mouse"></div></section>
  <section><h2>Привет. Это секция 2</h2></section>
  <section><h2>Привет. Это секция 3</h2></section>
  <section><h2>Привет. Это секция 4</h2></section>
  <section><h2>Привет. Это секция 5</h2></section>
</div>

БЛОГ НА HUSL

Как растянуть блок по высоте окна?

Ответы (2 шт):