overflow-y | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Главная » Справочник CSS3 » Позиционирование


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


overflow-y | Свойство CSS

Свойство overflow-y устанавливает видимую часть элемента по оси y




Свойство overflow-y устанавливает видимую часть элемента по оси y ( по вертикали ).Можно применять только числовые значения.Свойство применимо к блочным элементам,создано в версии CSS3 и проходит валидацию согласно версии CSS3.




Дополнительные свойства overflow-y

Свойство
Описание
overflowУстанавливает видимость элемента по горизотали и вертикали ( оси x и y )
overflow-xУстанавливает видимость элемента по горизонтали ( оси x )
-ms-overflow-xУстанавливает видимость элемента по горизотали ( оси x )
-ms-overflow-yУстанавливает видимость элемента по вертикали ( оси y )


Дополнительные значения overflow-y

Значение
Описание
visibleУстанавливает видимость всего элемента ( может выйти за установленные границы блочного элемента )
hiddenОбрежет элемент не поместившийся в блочном элементе ( по горизонтали )
scrollДобавит скроллинг элементу вышедшему за пределы блочного элемента
autoБраузер сам определяет видимость элемента
inheritНаследует значения родителя


Свойство работает в браузерах




Пример применения свойства overflow-y



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство overflow-y</title>
<meta charset="utf-8">
<style type="text/css">
<!--
.visible {
overflow-y:visible;
-ms-overflow-y:visible;
width:150px;
height:170px;
border:5px double #0ba1d5;
}
.hidden {
overflow-y:hidden;
-ms-overflow-y:hidden;
width:150px;
height:170px;
border:5px double #0ba1d5;
}
.scroll {
overflow-y:scroll;
-ms-overflow-y:scroll;
width:150px;
height:170px;
border:5px double #0ba1d5;
}
-->
</style>
</head>
<body>
<div class="visible">
<img src="http://delaisait.ucoz.ru/css/demo/img/overflow-y.png">
</div>
<br>
<br>
<div class="hidden">
<img src="http://delaisait.ucoz.ru/css/demo/img/overflow-y.png">
</div>
<br>
<br>
<div class="scroll">
<img src="http://delaisait.ucoz.ru/css/demo/img/overflow-y.png">
</div>
</body>
</html>

Пример в действии




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-box/#overflow-x
Категория: Позиционирование | Добавил: IZOTOP (28.04.2012) | Автор: Меренков Михаил E W
Просмотров: 1139 | Теги: css, свойство, style, для чего, что означает, overflow-y, что это | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]