Серверное время 2018-08-15 03:06:54
Приветствую вас, Гость
Понравился сайт - нажми CTRL+D и добавь в закладки..
Свойства CSS
CSS по категориям
Статистика
Яндекс.Метрика
Реклама
Реклама

overflow

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Возможно неправильное отображение
Возможно неправильное отображение
Возможно неправильное отображение
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Краткая информация
CSS CSS2+
Значение по умолчанию visible
Наследуется Нет
Применяется К блочным элементам
Процентная запись Неприменима
Ссылка на спецификацию открыть в новой вкладке
Описание
Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
Синтаксис
overflow: auto | hidden | scroll | visible | inherit
Аргументы
visible - Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden - Отображается только область внутри элемента, остальное будет скрыто.
scroll - Всегда добавляются полосы прокрутки.
auto - Полосы прокрутки добавляются только при необходимости.
inherit - Устанавливает значение родителя.
Пример
<!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>
Демонстрация примера
Объектная модель
[window.]document.getElementById("elementID").style.overflow
Примечание
Internet Explorer до версии 7.0 включительно:
  • не поддерживает значение inherit;
  • относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position: fixed.
  • Internet Explorer 8:
  • Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
  • Для блока, у которого указаны свойства float и overflow со значением scroll, игнорируется ширина, заданная через свойство max-width.
  • Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.
  • Первоисточник - htmlbook.ru Автор - Влад Мержевич
    Комментариев (0)
    Имя
    Email
    Осталось 65535 символов
    © 2006-2012, Home-test.biz