CSS :: Свойство overflow-y
http://belarusweb.net
Основы создания сайтов

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

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

Характеристики

  • Значение по умолчанию: visible.
  • Применяется: к блочным элементам.
  • Наследуется: нет.
  • Анимируется: нет.
  • JavaScript: object.style.overflowY="value".

Синтаксис

overflow-y: auto | hidden | scroll | visible

Значения

  • visible – в случае переполнения блочного элемента содержимым по вертикали, оно будет отображаться даже за его пределами (т.е. обрезаться не будет).
  • hidden – содержимое, которое не поместиться в размеры блочного элемента по вертикали, отображаться на странице не будет (т.е. будет обрезано).
  • scroll – в элемент будет добавлена вертикальная полоса прокрутки. При этом содержимое, которое не поместиться в размеры блочного элемента по вертикали, отображаться на странице не будет (т.е. будет обрезано), но его можно будет просмотреть при помощи вертикальной полосы прокрутки.
  • auto – вертикальная полоса прокрутки будет добавляться только в случае переполения блочного элемента его содержимым по вертикали.

Ссылки

Примеры

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		div{
		width: 360px;
		height: 80px;
		margin: 4em;
		padding: 5px;
		}
		
		.overflow_y_1{
		overflow-y: visible; 
		}
		
		.overflow_y_2{
		overflow-y: hidden; 
		}
		
		.overflow_y_3{
		overflow-y: scroll; 
		}
		
		.overflow_y_4{
		overflow-y: auto; 
		}

	</style>
	
</head>
<body>

		<div class="overflow_y_1" style="background-color: violet;">
			overflow-y: visible overflow-y: visible overflow-y: visible
			overflow-y: visible overflow-y: visible overflow-y: visible
			overflow-y: visible overflow-y: visible overflow-y: visible			 
			overflow-y: visible overflow-y: visible overflow-y: visible		 
			overflow-y: visible overflow-y: visible overflow-y: visible			 
			overflow-y: visible overflow-y: visible overflow-y: visible			 
		</div>
			
			
		<div class="overflow_y_2" style="background-color: yellow;">
			overflow-y: hidden overflow-y: hidden overflow-y: hidden
			overflow-y: hidden overflow-y: hidden overflow-y: hidden
			overflow-y: hidden overflow-y: hidden overflow-y: hidden			 
			overflow-y: hidden overflow-y: hidden overflow-y: hidden		 
			overflow-y: hidden overflow-y: hidden overflow-y: hidden			 
			overflow-y: hidden overflow-y: hidden overflow-y: hidden
		</div>
			
		<div class="overflow_y_3" style="background-color: green;">
			overflow-y: scroll overflow-y: scroll overflow-y: scroll
			overflow-y: scroll overflow-y: scroll overflow-y: scroll
			overflow-y: scroll overflow-y: scroll overflow-y: scroll			 
			overflow-y: scroll overflow-y: scroll overflow-y: scroll		 
			overflow-y: scroll overflow-y: scroll overflow-y: scroll			 
			overflow-y: scroll overflow-y: scroll overflow-y: scroll
		</div>
			
		<div class="overflow_y_4" style="background-color: violet;"> 
			overflow-y: auto overflow-y: auto overflow-y: auto
			overflow-y: auto overflow-y: auto overflow-y: auto
			overflow-y: auto overflow-y: auto overflow-y: auto			 
			overflow-y: auto overflow-y: auto overflow-y: auto		 
			overflow-y: auto overflow-y: auto overflow-y: auto			 
			overflow-y: auto overflow-y: auto overflow-y: auto
		</div>
		
</body>
</html>

Пример №1