htmlbook.ru - Для тех, кто делает сайты
Статьи Книги Шаг за шагом Рецепты Форум
Главная страница > Свойства CSS > overflow
Свойства CSS
!important
@charset
@import
@font-face
@media
@page
active
after
background
background-attachment
background-color
background-image
background-position
background-repeat
before
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
bottom
caption-side
clear
clip
color
content
cursor
counter-increment
counter-reset
direction
display
empty-cells
first-child
first-letter
first-line
float
focus
font
font-family
font-size
font-style
font-variant
font-weight
height
hover
lang
left
letter-spacing
line-height
link
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
orphans
outline
outline-color
outline-style
outline-width
overflow
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
position
quotes
right
table-layout
text-align
text-decoration
text-indent
text-shadow
text-transform
top
unicode-bidi
vertical-align
visibility
visited
white-space
widows
width
word-spacing
z-index
CSS по типам
@-правила
Цвет и фон
Границы
Позиционирование
Размеры
Форматирование
Шрифт
Текст
Список
Отступы
Поля
Таблица
Интерфейс
Контент
Печать
Псевдоклассы
Псевдоэлементы
CSS 3
background-size
border-bottom-left-radius
border-bottom-right-radius
border-radius
border-top-left-radius
border-top-right-radius
box-sizing
opacity
overflow-x
overflow-y
text-overflow
word-wrap
writing-mode
:empty
:first-of-type
:last-child
:last-of-type
:not
:nth-child
:nth-last-child
:nth-of-type
:only-of-type
:root
:target

overflow

Internet ExplorerInternet Explorer ChromeChrome OperaOpera SafariSafari FirefoxFirefox
6.0 7.0 8.0 2.0 3.0 4.0 9.2 9.6 10 2.0 3.1 4.0 2.0 3.0 3.6
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Да

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

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

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3
Нет Да Да Да

Описание

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

Синтаксис

overflow: auto | hidden | scroll | visible | inherit

Значения

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

Пример

HTML 4.01CSS 2.1CSS 3IE 6IE 7IE 8Op 9.6Op 10Sa 3.1Sa 4Cr 3Ff 3.0

<!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=utf-8">
  <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. Применение свойства overflow

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

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

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Copyright 2002–2010 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

О сайте | Планы на будущее | Использование сайта | Борьба с ошибками | Технологии | Поддержать проект