Как убрать горизонтальный скролл css

Как скрыть скроллбар?

Сегодня узнаем, как можно с помощью CSS скрыть полосу прокрутки.

body < overflow: hidden; /* Скрываем scrollbars */ >

Чтобы скрыть только вертикальную или только горизонтальную полосу прокрутки, можно использовать:

body < overflow-y: hidden; /* Скрываем вертикальный scrollbar */ overflow-x: hidden; /* Скрываем горизонтальный scrollbar */ >

Скрываем скроллбар, но сохраняем возможность прокрутки

Чтобы скрыть скроллбар, но сохранить возможность скролить содержимое, можно использовать следующий код:

/* Скрываем scrollbar для Chrome, Safari и Opera */ .example::-webkit-scrollbar < display: none; >/* Скрываем scrollbar для IE, Edge и Firefox */ .example < -ms-overflow-style: none; /* IE и Edge */ scrollbar-width: none; /* Firefox */ >

Как убрать горизонтальный скролл в 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

Искл., ежели содержимым является элемент, у которого свойство position имеет значение fixed .

длина окна:

 div 
тысячадевятьсотдевяностодевятикилограммовый

То есть если элемент при direction: ltr; уводить за левый (при direction: rtl; — за правый) край страницы, то горизонтальной полосы прокрутки не будет.

direction: rtl;

 
тысячадевятьсотдевяностодевятикилограммовый

Можно запретить появление горизонтальной полосы прокрутки и обрезать выходящее за страницу содержимое, но это лишь усугубит проблему — чтобы читатель имел возможность прокрутить страницу, нужно будет разрабатывать и подключать JavaScript

длина окна:

 html, body тысячадевятьсотдевяностодевятикилограммовый

Следует доработать вёрстку: при отзывчивой, сделанной специалистом, хорошо разбирающимся в CSS, проблем не должно возникать

длина окна:

 body тысячадевятьсотдевяностодевятикилограммовый

Убрать горизонтальный скролл

Учусь верстать макет, графика выходит за пределы 1000px. Желательно сделать так, что бы на мониторе с разрешением экрана 1024x768px не появлялся горизонатальный скролл, а то, что не влезло, просто оставалось за пределами браузера. Как этого добиться?

Отслеживать
задан 22 мая 2012 в 15:19
3,187 7 7 золотых знаков 46 46 серебряных знаков 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

Отслеживать
81k 9 9 золотых знаков 78 78 серебряных знаков 135 135 бронзовых знаков
ответ дан 4 мая 2017 в 9:49
81 1 1 серебряный знак 1 1 бронзовый знак

#wrapper

Обычно такого хватает. # wrapper — обертка всего сайта, обычно идет следом за body

Отслеживать
ответ дан 22 мая 2012 в 16:52
14.3k 1 1 золотой знак 21 21 серебряный знак 35 35 бронзовых знаков
overflow: show — что?
4 мая 2017 в 10:03
Отслеживать
ответ дан 25 мая 2012 в 8:08
4,966 10 10 золотых знаков 33 33 серебряных знака 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.1.9.3159

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.