overflow

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS CSS2
Значение по умолчанию visible
Наследуется Нет
Применяется К блочным и заменяемым элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow

Описание

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

Синтаксис

overflow: auto | hidden | scroll | visible

Аргументы

visible
Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden
Отображается только область внутри элемента, остальное будет обрезано.
scroll
Всегда добавляются полосы прокрутки.
auto
Полосы прокрутки добавляются только при необходимости.

Пример

Валидный CSS
Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>overflow</title>
<style type="text/css">
.layer {
 overflow: scroll; /* Добавляем полосы прокрутки */
 width: 300px; /* Ширина блока */
 height: 150px; /* Высота блока */
 padding: 5px; /* Поля вокруг текста */
 border: solid 1px black; /* Параметры рамки */
}
</style>
</head>
<body>

<div class="layer">
<h2>Duis te feugifacilisi</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Применение параметра oveflow

Объектная модель

[window.]document.getElementById("elementID").style.overflow

Примечание

Браузер Internet Explorer поддерживает также параметр overflow-x, который отображает полосу прокрутки по горизонтали и overflow-y, он отвечает за полосу прокрутки по вертикали. Аргументы те же, что и для overflow.