Разделы HTML 100% высоты окна просмотра

Я пытаюсь создать сайт на одной странице с разделами (5). Я пытаюсь сделать каждую секцию 100% шириной и высотой окна. Таким образом, даже если размер окна изменяется, размер раздела адаптируется к нему.

Я слышал о JavaScript, но я не нашел подходящего решения. Может кто-нибудь мне помочь? Возможно ли это с помощью медиа-запросов?

Ответы

Ответ 1

Примечание: vh работает только для ноутбуков и экранов больших размеров, потому что для мобильных экранов меньшего размера vh также учитывает окно браузера, в котором отображается веб-сайт и такие элементы, как громкость, батарея и т.д. Над окном браузера.

Это может быть сделано только в CSS, Javascript не требуется.

Правильный способ - использовать единицы vh и vw:

vh: 1/100 высоты окна просмотра.

vw: 1/100 ширины области просмотра.

Таким образом, если вы хотите, чтобы элемент, который вы хотите иметь на 100% выше, чем область просмотра, настройка высоты 100vh даст вам то, что вам нужно.

html,
body {
  height: 100%;
  margin: 0;
}
section {
  height: 100vh;
}
section:nth-child(1) {
  background: lightblue;
}
section:nth-child(2) {
  background: lightgreen;
}
section:nth-child(3) {
  background: purple;
}
section:nth-child(4) {
  background: red;
}
section:nth-child(5) {
  background: yellow;
}

<section></section>
<section></section>
<section></section>
<section></section>
<section></section>