Как сделать скролл внутри блока css

Обновлено: 07.07.2024

Я ищу решение CSS / Javascript для моей проблемы с прокруткой HTML-страницы.

У меня есть три div, которые содержат div, заголовок и обертку div,

Мне нужна вертикальная полоса прокрутки в div-оболочке, высота должна быть автоматической или 100% в зависимости от содержимого.

Заголовок должен быть исправлен, и мне не нужна общая полоса прокрутки, поэтому я указал overflow:hidden в теге body,

HTML

CSS

Пожалуйста, обратитесь к этой JS Fiddle

Вам не хватает height свойства CSS.

Добавив его, вы заметите, что появится полоса прокрутки.

Свойство CSS overflow-y указывает, следует ли обрезать содержимое, отображать полосу прокрутки или отображать содержимое переполнения элемента уровня блока, когда оно переполняется на верхнем и нижнем краях.

как остановить высоту в области просмотра? Я не хочу жестко кодировать в пикселях, так как это не работает для разных размеров экрана

@djechlin Задайте вопрос по этому поводу. Возможно, вы можете использовать процентные значения или dislpay: fixed . Я не уверен, что вы пытаетесь сделать.

Быть может, вы уже сталкивались с ситуацией, когда контент определенного элемента словно выходит за его пределы. Это часто случается, если размеры содержимого оказываются больше, чем размеры контейнера, в котором оно находится. Например:

Блок div, переполненный текстовым содержимым

Управлять таким поведением содержимого можно благодаря CSS-свойству overflow. Примените его к контейнеру, задав одно из следующих значений:

Покажем несколько примеров overflow в действии:

Overflow с разными значениями

И напоследок — один из практических вариантов использования overflow: hidden :

Overflow:hidden для ограничения графического контента

Поддержка браузерами

Свойство overflow воспринимается всеми используемыми браузерами, включая Internet Explorer 6.

Далее в учебнике: установка максимально допустимой ширины и высоты с помощью CSS.

На практике (при верстке либо при редактировании) такие ситуации встречаются нередко, поэтому это будет полезно многим. Тем более, что попутно мы затронем вариации данного свойства overflow-x и overflow-y, которые являются частным случаем и обладают своими особенностями. А также коснемся смежного правила text-overflow, определяющее режим видимости текста в блоке, который выходит за границы элемента.

Конечно, во многих случаях не обойтись без задания конкретных размеров области посредством width и height (ширины и высоты блока), которые могут принимать значения, выраженные в различных единицах измерения. В общем, рассмотрим ниже примеры действия свойства оверфлоу во всех возможных вариантах.

Overflow (visible, hidden) - видимое или скрытое содержание блока, выходящего за его пределы

Сначала, следуя традиции, посмотрим, какие значения действуют в таблице спецификации Международного консорциума W3C (данные представлены по версии CSS2.1, хотя они действительны и поддерживаются в более новой версии CSS3):

Как видите, оверфлоу имеет 4 основных параметра (visible, hidden, auto, scroll) и значение inherit, которое можно прописать при желании присвоить дочерним элементам свойство родителя, однако по умолчанию это правило не наследуется (inherited: no на скриншоте). Дефолтным же значением является висибл (initial: visible).

Прежде, чем приступить к исследованию посредством практических примеров, давайте уясним для себя некоторые детали. Как уже было сказано выше, правило оверфлоу позволяет управлять содержимым блочного элемента в тех случаях, когда оно не помещается в его пределах. Это напрямую следует из названия данного CSS правила (overflow в переводе с английского означает переполнение, избыток.)

Предварительно вы можете ознакомиться, в чем состоит отличие блочных и строчных тегов, перейдя по предоставленной ссылке. Кроме того, нелишним будет пробежать взглядом материал о свойстве display block, которое и придает элементам на странице блочные характеристки.

Возьмем для примера контейнер DIV (в этой статье подробнее о дивах как основе блочной верстки), подкрасим его с помощью background, подключив стили через атрибут style, и поместим внутрь произвольный текст:

Итоговый результат будет примерно таким:

У нас не определена ширина (width) контейнера. В этом случае, если вы помните, блочный элемент занимает все доступное ему место по ширине. А вот высота (height) блока, ежели она не указана, определяется именно содержанием (в нашем примере присутствующим там текстом).

Перейдя по этой ссылке, вы сможете понаблюдать, как поведет себя блок с содержащимся в нем контентом при изменении ширины окна просмотра. Для этого попробуйте с помощью левой кнопки мышки передвигать границу влево-вправо:

А теперь попробуем к CSS стилям для дива из нашего примера добавить фиксированную ширину, скажем, 250px:

В результате произойдут следующие изменения с нашим контейнером:

В общем, все получилось в соответствии со сказанным выше: при указании фиксированной ширины блочного элемента содержание (текст) будет автоматически растягивать высоту контейнера. Далее укажем определенную высоту испытуемого блока, допустим, 40px:

В этом случае в условиях ограниченного пространства тому же самому объему контента деваться некуда и он вылезет за границу DIV по высоте:

Действует правило по умолчанию overflow visible (хотя оно и не прописано), в соответствии с которым содержимое, вылезающее за границы контейнера, отображается в браузере. Если теперь к стилям CSS элемента добавить overflow:hidden, то часть текста, не умещающегося в блоке, будет скрыто:

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

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

Возьмем для начала те же условия, что и в примере, который мы разобрали выше. Как помните, при указании фиксированной ширины блока контент перераспределялся таким образом, что не превышал границы по горизонтали, но одновременно увеличивал высоту контейнера (вместе с содержимым) по вертикали. Теперь изменим содержание и стандартный текст заменим длинными словами без пробелов с указанием width:

Обратите внимание, что теперь содержимое при ограничении ширины сразу превысило границы по горизонтали. И если пропишем overflow hidden, то тем самым обрежем контент:

Добавление прокрутки с помощью параметров scroll и auto правила overflow

Теперь разберем тот случай, если ширина и высота контейнера фиксированные, но не умещающийся в нем контент желательно оставить доступным. Возьмем тот же пример c фиксированными шириной и высотой, только значение height для наглядности укажем в 60px, добавив overflow:scroll к CSS стилям:

В результате по вертикали и горизонтали появились полосы прокрутки (scrollbars):

Таким образом, контент становится доступным, пусть и с помощью скроллинга. Однако, обратите внимание, что сформировалась не только вертикальная прокрутка, которая нужна для полного просмотра, но и горизонтальная, которая не является активной. Это особенность именно значения scroll.

Если же вы хотите, чтобы прокрутка появлялась только в случае необходимости, то имеет смысл применить параметр overflow:auto, который инициирует создание полос прокрутки только в том случае, если они действительно нужны (подробности посмотрите на этой вебстранице):

Хочу отметить, что у основного правила стилей есть вариации в виде overflow-x и overflow-y, которые принимают те же значения (visible, hidden, scroll, auto), что и базовый оверфлоу, только заданные параметры применяются к содержимому блоков по горизонтали (x) и по вертикали (y).

Правило CSS text-overflow (clip, ellipsis)

А теперь познакомимся с модификацией выше описанного свойства оверфлоу, которое появилось только в CSS3. О нем можно получить информацию на соответствующей официальной странице (редакторский черновик консорциума W3C):

Свойство text-overflow имеет 2 основных значения (clip и ellipsis). Оно действует только в том случае, если указан overflow, значение которого отлично от visible. А это, как вы помните, параметр по умолчанию, поэтому в стилях для соответствующего элемента должен обязательно присутствовать оверфлоу с hidden, scroll или auto.

Clip является дефолтным значением и просто обрезает текст. Поэтому задействуем text-overflow для нашего DIV с соответствующими CSS свойствами, добавив white-space:nowrap (для запрета переноса слов):

Как видите, ellipsis позволяет добавить многоточие вместо обрезанного текста, намекая на его продолжение. Чтобы придать логическое завершение данному примеру, можно дописать псевдокласс :hover для дива, который изменяет стиль элемента при наведении на него курсора:

Теперь текст будет обрезан, но ежели вы наведете на него курсор мышки, то он будет появляться в полном объеме. Можете в этом убедиться, перейдя по предоставленной ссылке.

Модуль CSS Overflow содержит функции CSS для обработки прокручиваемого переполнения, отображаемого на визуальных носителях (экранах устройств). CSS использует термин переполнение для описания содержимого блока, которое простирается за пределы одного из его краев, т.е. края области содержимого, поля, границы или отступа.

Управление переполнением

Поддержка браузерами

IE: 10
Edge: 12
Firefox: 52, 2 -moz
Chrome: 50, 4 -webkit-
Safari: 9, 3.1 -webkit-
Opera: 37, 11.5 -webkit-
iOS Safari: 9, 3.2 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 5, 4 -webkit-

1. Типы переполнения

Существует два типа переполнения, которое используется браузерами: переполнение эффектов рисования и прокручиваемое переполнение.

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

Прокручиваемое переполнение представляет собой набор элементов, выходящих за пределы области полей блока, для которых должен быть предусмотрен механизм прокрутки (полоса прокрутки, или скроллбар).

2. Прокрутка и обрезка переполнения: свойства overflow-x, overflow-y и overflow

Эти свойства определяют, будет ли содержимое блока, включая переполнение любых эффектов рисования, обрезано по краю области полей, и если это так, будет ли этот блок контейнером прокрутки, позволяющим пользователю прокручивать обрезанные части его содержимого. Применяются к блочным, гибким контейнерам и контейнерам-сеткам.

Свойство overflow-x определяет обработку переполнения в горизонтальном направлении (т.е. переполнение с левой и правой сторон блока), а свойство overflow-y определяет обработку переполнения в вертикальном направлении (т.е. переполнение с верхней и нижней сторон блока).

Свойства не наследуются.

overflow-x, overflow-y
Значения:
visible	Значение по умолчанию. Содержимое не обрезается, а отображается поверх границ блока-контейнера. Возможно перекрытие соседних блоков.
hidden	Содержимое блока обрезается без добавления какого-либо интерфейса прокрутки для просмотра содержимого вне области обрезки.
scroll	Содержимое обрезается до области полей, при этом блок становится прокручиваемым контейнером. Если браузер использует механизм прокрутки, который виден на экране, например, полосу прокрутки, этот механизм отображается независимо от того, обрезано ли какое-либо его содержимое. Это позволяет избежать проблем с появлением и исчезновением полос прокрутки в динамической среде. Размеры контейнера при этом не меняются, а полоса прокрутки вставляется между внутренним краем границы и внешним краем поля элемента.
auto	Браузер использует механизм прокрутки только при переполнении блока.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Свойство overflow — сокращенное свойство, которое задает значения overflow-x и overflow-y в указанном порядке. Если второе значение опущено, оно копируется из первого.

Содержимое блочных элементов может переполнять блок в случае, когда для блока явно задана высота и/или ширина. Без указания высоты блок будет растягиваться, чтобы вместить содержимое, кроме случаев, когда для блока задано позиционирование position: absolute; или position: fixed; . Текст может переполнять блок по высоте, изображения — по высоте и ширине.

overflow
Значения:
visible	Значение по умолчанию. Содержимое не обрезается, а отображается поверх границ блока-контейнера. Возможно перекрытие соседних блоков.
hidden	Содержимое блока обрезается без добавления какого-либо интерфейса прокрутки для просмотра содержимого вне области обрезки. Также предотвращает отображение фона или границ под плавающими элементами, для которых задано свойство float: left / right; .
scroll	Содержимое обрезается до области полей, при этом блок становится прокручиваемым контейнером. Если браузер использует механизм прокрутки, который виден на экране, например, полосу прокрутки, этот механизм отображается независимо от того, обрезано ли какое-либо его содержимое. Это позволяет избежать проблем с появлением и исчезновением полос прокрутки в динамической среде. Размеры контейнера при этом не меняются, а полоса прокрутки вставляется между внутренним краем границы и внешним краем поля элемента.
auto	Браузер использует механизм прокрутки только при переполнении блока.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

3. Автоматическое многоточие

3.1. Многоточие при переполнении: свойство text-overflow

Свойство позволяет обрезать строчное содержимое в случае, когда оно не умещается в блок-контейнер, визуально обрезая его или отображая многоточием. Текст может переполниться, например, когда ему запрещается перенос, например, из-за white-space: nowrap или отдельное слово слишком длинное, чтобы уместиться.

Свойство работает только при задании следующих условий: должна быть определена ширина блока-контейнера, элемент должен иметь значения overflow: hidden и white-space: nowrap . Применяется только к блочным контейнерам.

Читайте также: