const scroll = () => {
window.scrollBy(0, window.innerHeight);
};
window.addEventListener('click', scroll);
* {
margin: 0;
padding: 0;
}
section {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
section:nth-of-type(1) {
background-color: red;
}
section:nth-of-type(2) {
background-color: yellow;
}
section:nth-of-type(3) {
background-color: green;
}
section:nth-of-type(4) {
background-color: blue;
}
<body>
<section></section> <!-- looks like 101vh -->
<section></section> <!-- looks like 100vh -->
<section></section> <!-- looks like 100vh -->
<section></section> <!-- looks like 100vh -->
</body>
Обновление фрагмента. (Похоже на мой реальный проект).
Как видно, первый раздел выглядит немного длиннее, чем другие участники, хотя все они имеют 1 высоту области просмотра в консоли, что приводит к отступу от предыдущего раздела поверх следующих разделов
Это происходит только в chrome / opera, когда окно развернуто, но не на весь экран (F11). Для этого фрагмента вы можете создать полную страницу и F11, или использовать консоль chrome, чтобы посмотреть, как она выглядит в мобильных устройствах.
Интересно, будет ли window.innerheight === 100vh, но в этом случае поле должно быть больше и больше вместо постоянного значения.