Прокрутка элементов

Последнее обновление: 21.04.2016

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

Однако свойство overflow позволяет настроить поведение блока в подобной ситуации и добавить возможность прокрутки. Это свойство может принимать следующие значения:

  • auto: если контент выходит за границы блока, то создается прокрутка. В остальных случаях полосы прокрутки не отображаются

  • hidden: отображается только видимая часть контента. Контент, который выходит за границы блока, не отображается, а полосы прокрутки не создаются

  • scroll: в блоке отображаются полосы прокрутки, даже если контент весь помещается в границах блока, и таких полос прокрутки не требуется

  • visible: значение по умолчанию, контент отображается, даже если он выходит за границы блока

Рассмотрим применение двух значений:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Прокрутка в CSS3</title>
        <style>
		.article1{
			width: 300px;
			height: 150px;
			margin:15px;
			border: 1px solid #ccc;
			overflow: auto;
		}
		.article2{
			width: 300px;
			height: 150px;
			margin:15px;
			border: 1px solid #ccc;
			overflow: hidden;
		}
        </style>
    </head>
    <body>
		<div class="article1">
		<p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть 
			колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и 
			горя – ничего не было видно. Да, это тот самый дуб», – подумал князь 
			Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.</p>
		</div>
		<div class="article2">
		<p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть 
			колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и 
			горя – ничего не было видно. Да, это тот самый дуб», – подумал князь 
			Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.</p>
		</div>
	</body>
</html>
Создание прокрутки в CSS

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

overflow-x: auto;
overflow-y: hidden;

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850