Я пытаюсь создать сайт на одной странице с разделами (5). Я пытаюсь сделать каждую секцию 100% шириной и высотой окна. Таким образом, даже если размер окна изменяется, размер раздела адаптируется к нему.
Я слышал о JavaScript, но я не нашел подходящего решения. Может кто-нибудь мне помочь? Возможно ли это с помощью медиа-запросов?
Примечание: 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>