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 that you have read and understand our privacy policy and code of conduct.

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