Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Параметры переполнения. Контейнеры с прокруткой

Параметры переполнения. Контейнеры с прокруткой

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

Но что случится, если мы зададим для контейнера высоту? Тогда может выйти так, что содержимое контейнера не поместится в нем, и возникнет переполнение контейнера. Поведение контейнера зависит от параметров, которые мы зададим для него.

Атрибут стиля overflow как раз и задает поведение контейнера при переполнении:

overflow: visible|hidden|scroll|auto|inherit

Здесь доступны четыре значения:

— visible — высота контейнера увеличится, чтобы полностью вместить все содержимое (обычное поведение);

— hidden — не помещающееся в контейнер содержимое будет обрезано. Контейнер сохранит свои размеры;

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

— auto — полосы прокрутки появятся в контейнере, только если в них возникнет необходимость.

Пример:

#cmain { overflow: auto }

Мы задали для контейнера cmain такое поведение, когда при выходе содержимого за границы контейнера в нем появятся полосы прокрутки.

Здесь нужно сказать еще вот что. Атрибут стиля overflow имеет смысл только в том случае, если мы зададим для высоты контейнера абсолютное значение. При указании относительного значения высоты контейнера он всегда будет увеличиваться в размерах для того, чтобы вместить все содержимое, как будто для атрибута стиля overflow задано значение visible:

#cmain { height: 500px; overflow: auto }

Вот теперь контейнер cmain при необходимости обзаведется полосами прокрутки.

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

#cmain { height: 50 %; overflow: auto }

Атрибуты стиля overflow-x и overflow-y задают поведение контейнера при выходе содержимого за пределы его границ, соответственно, по горизонтали и вертикали. Доступные значения у них те же, что и у атрибута стиля overflow:

#cnavbar { width: 270px; overflow-x: hidden }

Пользуясь только что изученными атрибутами стиля, мы можем создать на Web-странице контейнеры с прокруткой! Это обычные контейнеры с большим содержимым, для просмотра которого предусмотрены полосы прокрутки. Их преимущество в том, что посетитель, прокручивая содержимое такого контейнера, не затрагивает все остальные фрагменты Web-страницы (заголовок Web-сайта, полоса навигации и сведения об авторских правах). Весьма удобно.

Контейнеры с прокруткой — высший шик современного Web-дизайна. Нужно будет и нам создать такие.

Оглавление книги