57Для того, чтобы убрать вертикальный скролл на веб-странице, нужно сделать так, чтобы общая высота страницы не превышала высоту видимой области браузера. Для этого можно применить следующие CSS-правила:
- Убрать отступы у body и html:
body, html {
margin: 0;
padding: 0;
}- Сделать высоту элементов на странице гибкой, чтобы они могли сжиматься или растягиваться в зависимости от размера экрана:
* {
box-sizing: border-box;
}- Ограничить высоту контейнера, который содержит все элементы на странице, до 100% высоты экрана:
.container {
max-height: 100vh;
overflow-y: auto;
}- Добавить свойство overflow-y: auto; для контейнера для случаев, когда высота контейнера превышает высоту экрана, и скроллбары появляются автоматически.
Обратите внимание, что в предыдущем примере свойство overflow-y: auto; будет появляться (автоматически) только когда контейнер превысит высоту экрана.
Эти CSS-правила помогут избавиться от вертикального скролла на странице. Однако, если контент на странице очень много, то пользователь все равно будет прокручивать страницу, чтобы добраться до нижней части контента.
Один комментарий на «“Как убрать вертикальный скролл CSS”»
На мой взгляд, resize — это универсальный метод для кроссплатформенных приложений. Так можно быть уверенным в правильной работе приложения (отображение) на устройствах с любым размером экрана.