2

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

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

Пример

2
  • Если правильно вас понял то, в CSS прописать стили нужным блокам div {width:100%};
    – Dio
    22 апр 2020 в 14:31
  • @Dio Спасибо, но я не настолько новичок) Проблема всего лишь в том, чтобы сделать высоту блока, равной высоте окна
    – DarkRou
    22 апр 2020 в 14:32

2 ответа 2

6

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

height: 100vh;

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

3

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

* {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>

1
  • 1
    Ого, интересная фича. А вопрос - насколько это кроссбраузерно? или лучше делать это через js?
    – DarkRou
    23 апр 2020 в 3:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.