CSS скрыть полосу прокрутки, если не нужно

436

Я пытаюсь понять, как я могу скрыть, overflow-y:scroll;если не нужно. Я имею в виду, что я создаю веб-сайт, и у меня есть основная область, в которой будут отображаться сообщения, и я хочу скрыть полосу прокрутки, если содержимое не превышает текущую ширину.

Кроме того, мой второй вопрос. Я хочу сделать так, чтобы, когда сообщения превышали текущую ширину, ширина автоматически увеличивалась, и содержимое не выходило из коробки.

У кого-нибудь есть подсказка, как это сделать?

Зона сообщений:

.content {
    height: 600px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    font-size: 15px;
    text-align: justify;
    line-height: 19px;
    overflow-y:scroll;
}

Контейнер основного сайта:

.container {
    margin: 0 auto;
    width: 757px;
    margin-top: 30px;
    text-align: center;
}

html css

— Танос Паравантис
источник

Вы хотите скрыть вертикальную или горизонтальную полосу прокрутки? Можете ли вы опубликовать пример с HTML-кодом, например, на jsfiddle.net и связать его здесь

— RJo

Здравствуйте, я разместил 2 класса, которые я использую. На HTML ничего, кроме вызова классов.

— Танос Паравантис

745

Задайте overflow-yсвойство autoили удалите свойство вообще, если оно не наследуется.

— RJo
источник

Я мог бы, но мне нужна помощь со вторым вопросом, также, о ширине, автоматическом увеличении.

— Танос Паравантис

Вы всегда можете попробовать использовать поиск в stackoverflow: stackoverflow.com/questions/450903/…

— RJo

Где в твоих примерах свиток?

— Зеленый

13

При настройке overflow-y: auto решена моя проблема - ссылка на самом деле не показывает пример этого ...

— Shadow

2

Следует отметить, что overflow-x: autoтакже работает, чтобы скрыть горизонтальные полосы прокрутки.

— Эдвард д'Суза

40

Ты можешь использовать overflow:auto;

Вы также можете управлять осью X или Y индивидуально с помощью overflow-xиoverflow-y свойствами.

Пример:

.content {overflow:auto;}
.content {overflow-y:auto;}
.content {overflow-x:auto;}

— Айяппан К
источник

20

Хотя мы благодарим вас за ваш ответ, было бы лучше, если бы он предоставил дополнительную ценность поверх других ответов. В этом случае ваш ответ не дает дополнительной ценности, поскольку другой пользователь уже опубликовал это решение. Если предыдущий ответ был вам полезен, вы должны проголосовать за него, а не повторять ту же информацию.

— Тоби Спейт

9

Вы можете использовать .content и .container для переполнения: auto. Означает, что если текст будет превышен автоматически, скролл придет по осям X и Y. (нет необходимости указывать отдельные оси X и Y обычно переполняются: auto)

.content {переполнение: авто;}

— Айяппан К
источник

5

.selected-elementClass{
    overflow-y:auto;
}

— Пратик Арора
источник

1

.container {переполнение: авто;} добьется цели. Если вы хотите контролировать конкретное направление, вы должны установить авто для этой конкретной оси. AE

.container {overflow-y: auto;} .container {overflow-x: hidden;}

Приведенный выше код будет скрывать любое переполнение по оси x и генерировать полосу прокрутки при необходимости на оси y. Но вы должны убедиться, что вы указали высоту по умолчанию, которая меньше высоты контейнера; в противном случае полоса прокрутки не будет скрыта.

— Neero
источник