Переполнение контейнеров

В случае если размер контейнера указан явно, то может возникнуть ситуация, когда размер контента превышает границы размеров контейнера.

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

• visible – отображается весь контент даже за пределами контейнера;
• hidden – отображается только область внутри контейнера, оставшаяся часть контента скрывается;
• scroll – добавление полос прокрутки контейнеру, полосы будут отображаться даже если в них нет необходимости;
• auto – полосы прокрутки появятся только в случае необходимости.

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

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

Рис. 8.4. Пример управления отображением содержимого контейнеров

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

Ключевые термины и определения

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

html-контейнер – элемент, внутри которого могут содержаться другие элементы.