Как убрать горизонтальный скролл в html
Для устранения горизонтального скролла в HTML можно использовать несколько подходов:
- CSS свойство overflow-x: hidden для тега body или для конкретного контейнера, который вызывает появление скролла.
body overflow-x: hidden; > - Ширина контейнера. Можно уменьшить ширину контейнера, чтобы он соответствовал ширине экрана и не вызывал появление скролла.
.container width: 100%; max-width: 1200px; /* например, максимальная ширина контейнера */ margin: 0 auto; /* центрирование */ > - Уменьшение размеров элементов на странице. Если на странице есть элементы, которые вызывают горизонтальный скролл, то можно уменьшить их размеры или перенести на другие места на странице.
- Использование медиа-запросов. Можно задать разные стили для разных размеров экрана, чтобы избежать появления скролла на устройствах с маленькими экранами.
@media screen and (max-width: 768px) .container width: 100%; max-width: 100%; > > В зависимости от конкретной ситуации, можно использовать один или несколько из перечисленных выше подходов.
Как отключить скролл css
Чтобы отключить скролл страницы в CSS, можно использовать свойство overflow для задания свойства hidden . Это свойство скрывает любой контент, который выходит за границы родительского элемента.
Например, если вы хотите отключить скролл на всей странице, вы можете добавить следующее правило в свой CSS файл:
body overflow: hidden; > Это скроет скролл на странице, но также отключит и возможность прокрутки страницы. Если вы хотите отключить скролл только для определенного элемента, вы можете применить этот стиль к этому элементу:
.container overflow: hidden; > Здесь мы применяем свойство overflow: hidden к элементу с классом container . Это скроет все контент, который выходит за границы элемента с классом container .
Если вы хотите отключить только горизонтальный или вертикальный скролл, вы можете использовать свойства overflow-x и overflow-y . Например:
body overflow-x: hidden; /* отключает горизонтальный скролл */ overflow-y: scroll; /* включает вертикальный скролл */ > В этом примере мы отключаем горизонтальный скролл и включаем только вертикальный скролл на странице.
Убрать горизонтальный скролл
Учусь верстать макет, графика выходит за пределы 1000px. Желательно сделать так, что бы на мониторе с разрешением экрана 1024x768px не появлялся горизонатальный скролл, а то, что не влезло, просто оставалось за пределами браузера. Как этого добиться?
Отслеживать
задан 22 мая 2012 в 15:19
3,197 7 7 золотых знаков 47 47 серебряных знаков 95 95 бронзовых знаков
6 ответов 6
Сортировка: Сброс на вариант по умолчанию
Добавляем к блоку в котором нужно убрать скролл стиль (в CSS или напрямую)
overflow:hidden; overflow-y:hidden; /*для вертикального*/ overflow-x:hidden; /*для горизонтального*/
Отслеживать
ответ дан 22 мая 2012 в 16:53
174 7 7 бронзовых знаков
@UndReim вместо использования тегов pre чтобы отформатировать код, выделите его мышью и нажмите на кнопку 101010 редактора.
23 мая 2012 в 11:17
Всё очень просто пишем:
html < width: 100%; max-width: 100%; overflow-x: hidden; >body
Отслеживать
81.6k 9 9 золотых знаков 78 78 серебряных знаков 136 136 бронзовых знаков
ответ дан 4 мая 2017 в 9:49
81 1 1 серебряный знак 1 1 бронзовый знак
#wrapper
Обычно такого хватает. # wrapper — обертка всего сайта, обычно идет следом за body
Отслеживать
ответ дан 22 мая 2012 в 16:52
14.3k 1 1 золотой знак 22 22 серебряных знака 35 35 бронзовых знаков
overflow: show — что?
4 мая 2017 в 10:03
Отслеживать
ответ дан 25 мая 2012 в 8:08
4,966 10 10 золотых знаков 35 35 серебряных знаков 62 62 бронзовых знака
контейнеру, в который не влазит контент добавить свойство overflow:hidden; это скроет непомещающиеся части.
Отслеживать
ответ дан 24 мая 2012 в 10:37
1,596 8 8 серебряных знаков 15 15 бронзовых знаков
если я правильно понял, то одно из свойств CSS вам должно помочь position: absolute. А также можно поиграться вот с этими свойствами max-width и min-width. Можно еще попробовать обернуть картинку в DIV и этому же DIV`у задать background, и указать размеры картинки которая задана фоном.
Отслеживать
ответ дан 22 мая 2012 в 16:42
1,712 4 4 золотых знака 24 24 серебряных знака 51 51 бронзовый знак
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.29.8372
Как убрать скролл у страницы css?
Добрый вечер! 
При добавлении свойства owerflow: hiden элементы скрылись однако у всей странице появляется нижний скролл. И нижнее меню растягивается на ширину учитывая и скрытые элементы. 
Почему так происходит?
.input__wrapper
- Вопрос задан более года назад
- 608 просмотров
1 комментарий
Простой 1 комментарий
Ankhena @Ankhena Куратор тега CSS
Почему так происходит?
Вы серьезно считаете, что показанного вами кода достаточно?
Сделайте песочницу с видимой проблемой на codepen.io или ссылку на сайт.
Решения вопроса 1
Kostenitskiy_A @Kostenitskiy_A
Если хочешь убрать горизонтальный скролл, примени это свойство к контейнеру в котором находятся элементы