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

Я пытаюсь выяснить, как я могу скрыть 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;
}

4 ответов


Set overflow-y свойство auto, или удалить свойство полностью, если оно не наследуется.

здесь является рабочим примером решения обеих проблем.


можно использовать overflow:auto;

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

пример:

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

вы можете использовать оба .содержание и. контейнер для переполнения:авто. Означает, что если его текст превышает автоматически прокрутку, появится ось x и ось y. (отсутствие потребности дать separete x-axis и y-axis обыкновенно дает переполнение: автомобиль)

.содержимое {overflow: auto;}


.контейнер {overflow: auto;} сделает трюк. Если вы хотите управлять определенным направлением, вы должны установить auto для этой конкретной оси. Е. А.

.контейнер {overflow-y: авто;} .контейнер {overflow-x: hidden;}

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