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

❮ Назад Вперед ❯

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

Свойство overflow-yимеет четыре значения — visible, hidden, scroll, auto.

Если значение свойства overflow-y установлено в visible, значение overflow-x, по умолчанию, будет установлено в visible.

Если значение свойства overflow-y установлено в scroll, auto или hidden, значение свойства overflow-x будет установлено в auto.

overflow-y: visible | hidden | scroll | auto | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div.scroll {
      background-color: #1c87c9;
      color: #fff;
      height: 60px;
      width: 200px;
      overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства overflow-y</h3>
    <h4>Overflow-y: scroll</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
 
  Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов..</div>
  </body>
</html>

Попробуйте сами!

Пример со значением «visible»:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div.visible {
      background-color: #8ebf42;
      color: #666;
      height: 40px;
      width: 200px;  
      overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства overflow-y</h3>
    <h4>Overflow-y: visible</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.
 
  В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
  </body>
</html>

Попробуйте сами!

Пример со значением «hidden»:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div.hidden {
      background-color: #1c87c9;
      color: #fff;
      height: 60px;
      width: 200px;
      overflow-y: hidden;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства overflow-y</h3>
    <h4>Overflow-y: hidden</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
 
 </div>
  </body>
</html>

Попробуйте сами!

Пример со значением «auto»:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div.auto {
      background-color: #1c87c9;
      color: #fff;
      height: 60px;
      width: 200px;
      overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства overflow-y</h3>
    <h4>Overflow-y: auto</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
  </body>
</html>

Попробуйте сами!

Рассмотрим пример со всеми значениями:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div. scroll {
      background-color: #8ebf42;
      height: 70px;
      width: 150px; 
      overflow-y: scroll;
      }
      div.hidden {
      background-color: #8ebf42;
      height: 70px;
      width: 150px;   
      overflow-y: hidden;
      }
      div.auto {
      background-color: #8ebf42;
      height: 70px;
      width: 150px;  
      overflow-y: auto;
      }
      div.visible {
      background-color: #8ebf42;
      height: 70px;
      width: 150px; 
      overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства overflow-y</h3>
    <h4>overflow-y: scroll</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
 
 </div>
    <h4>overflow-y: hidden</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
    <h4>overflow-y: auto</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</div>
    <h4>overflow-y: visible</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
 
 
 </div>
  </body>
</html>

Попробуйте сами!

Свойство overflow | CSS справочник

CSS свойства

Определение и применение

CSS свойство overflow указывает, что произойдёт, если содержимое переполняет размеры элемента.

Поддержка браузерами

Свойство
Chrome
Firefox
Opera
Safari
IExplorer
Edge
overflow1.01.07.01.04.012.0

CSS синтаксис:

overflow:"visible | hidden | scroll | auto | initial | inherit";

JavaScript синтаксис:

object.style.overflow = "hidden"

Значения свойства

ЗначениеОписание
visibleПереполнение не обрезается, содержимое выходит за пределы размеров элемента. Это значение по умолчанию.
hiddenПереполнение обрезается (контент, который выходит за размеры будет невидимым).
scrollПереполнение обрезается, но добавляется полоса прокрутки, позволяющая увидеть содержимое, которое выходит из заданных размеров.
autoЕсли переполнение обрезается, то полоса прокрутки будет добавлена автоматически, чтобы увидеть содержимое, которое выходит из заданных размеров.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Свойство overflow.</title>
<style> 
div {
display  : inline-block; /* выравниваем вертикально все элементы <div> */
margin-right : 30px; /* устанавливаем внешний отступ справа для элементов <div> */
width : 100px; /* устанавливаем ширину для блоков */
height : 100px; /* устанавливаем высоту для блоков */
border : 1px solid red; /* устанавливаем для блоков сплошную границу размером 1px красного цвета*/
}
img {
width : 125px; /* устанавливаем ширину для изображения */
height : 125px; /* устанавливаем высоту для изображения */
}

 
. test {
overflow : visible; /* переполнение не обрезается, содержимое выходит за пределы размеров элемента */
}
.test2 {
overflow : hidden; /* переполнение обрезается (контент, который выходит за размеры будет невидимым) */
}
.test3 {
overflow : scroll; /*  переполнение обрезается, но добавляется полоса прокрутки */
}
.test4 {
overflow : auto; /* если переполнение будет обрезано, то добавится полоса прокрутки автоматически */
}
</style>
</head>
	<body>
		<div class = "test">visible
		<img src = nich.jpg alt = ничоси>
		</div>
		<div class = "test2">hidden
		<img src = nich.jpg alt = ничоси>
		</div>
		<div class = "test3">scroll
		<img src = nich.jpg alt = ничоси>
		</div>
		<div class = "test4">auto
		<img src = nich.jpg alt = ничоси>
		</div>
	</body>
</html>
Пример использования свойства overflow.CSS свойства

overflow-x — CSS: каскадные таблицы стилей

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

 /* Значения ключевых слов */
переполнение-x: видимое;
переполнение-x: скрыто;
переполнение-х: клип;
переполнение-x: прокрутка;
переполнение-х: авто;
/* Глобальные значения */
переполнение-x: наследовать;
переполнение-х: начальный;
переполнение-х: вернуться;
переполнение-x: обратный слой;
переполнение-x: не установлено;

Свойство overflow-x указано как одно ключевое слово, выбранное из списка значений ниже.

Значения

видимые

Содержимое не обрезается и может отображаться за пределами левого и правого краев поля заполнения. Если overflow-y равно hidden , scroll или auto , а это свойство visible , оно будет неявно вычислено как auto .

скрытый

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

зажим

Как и для hidden , содержимое обрезается до поля заполнения элемента. Разница между clip и hidden заключается в том, что ключевое слово clip также запрещает любую прокрутку, включая программную прокрутку. Поле не является контейнером прокрутки и не запускает новый контекст форматирования. Если вы хотите запустить новый контекст форматирования, вы можете использовать 9Отображение 0004: поток-корень , чтобы сделать это.

свиток

Содержимое обрезается, если необходимо, чтобы оно помещалось в поле заполнения по горизонтали. Браузеры отображают полосы прокрутки независимо от того, обрезано ли какое-либо содержимое. (Это предотвратит появление или исчезновение полос прокрутки при изменении содержимого.) Принтеры могут по-прежнему печатать переполненное содержимое.

авто

Зависит от пользовательского агента. Если содержимое помещается внутри поля заполнения, оно выглядит так же, как видимый , но по-прежнему устанавливает новый контекст форматирования блока. Настольные браузеры предоставляют полосы прокрутки, если содержимое выходит за пределы.

Initial value visible
Applies to Block-containers, flex containers, and grid containers
Inherited no
Computed value as specified, except с видимым / зажимом computing to auto / hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
Animation type discrete
 overflow-x = 
 видимый | 
 скрыто | 
 зажим | 
 свиток | 
 авто

HTML 

 
    
  
  • 
    overflow-x:hidden — скрывает текст за пределами поля. 
    
    ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    
  
    • 
  
  • 
    overflow-x:scroll — всегда добавляет полосу прокрутки
    
    ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    
  
    • 
  
  • 
    overflow-x:visible — отображает текст за пределами поля, если
    нужный
    
    ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    
  
    • 
  
  • 
    overflow-x:auto — в большинстве браузеров эквивалентно
    прокрутить
    
    ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    
  
    •

CSS 

 #div1,
#див2,
#див3,
#div4 {
  граница: 1px сплошной черный;
  ширина: 250 пикселей;
  нижняя граница: 12px;
}
#дел1 {
  переполнение-x: скрыто;
}
#div2 {
  переполнение-x: прокрутка;
}
#div3 {
  переполнение-x: видимое;
}
#div4 {
  переполнение-х: авто;
}

Result

Specification
CSS Overflow Module Level 3
# overflow-properties

BCD tables only load in the browser with JavaScript enabled. Включите JavaScript для просмотра данных.

  • Связанные свойства CSS: text-overflow , white-space , overflow , overflow-y , clip , display

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Просмотрите исходный код на GitHub.

Хотите принять более активное участие?

Узнайте, как внести свой вклад.

Последнее изменение этой страницы от участников MDN.

переполнение | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство overflow управляет тем, что происходит с содержимым, выходящим за его границы: представьте себе div , в котором вы явно установили ширину 200 пикселей, но содержит изображение шириной 300 пикселей. Это изображение будет торчать из div и будет видимым по умолчанию. Принимая во внимание, что если вы установите значение overflow на hidden , изображение будет обрезано на 200px.

 раздел {
  переполнение: видимое | скрытый | прокрутить | авто | наследовать
}

Значения

  • visible : содержимое не обрезается, когда оно выходит за пределы своего поля. Это значение свойства по умолчанию
  • hidden : переполняющее содержимое будет скрыто.
  • прокрутка : аналогично скрытому, за исключением того, что пользователи смогут прокручивать скрытый контент.
  • клип : содержимое обрезается, когда оно выходит за пределы своего блока. Это можно использовать с overflow-clip-margin , чтобы установить отсеченную область.
  • auto : если содержимое выходит за пределы своего поля, то это содержимое будет скрыто, в то время как полоса прокрутки должна быть видна для пользователей, чтобы прочитать остальную часть содержимого.
  • начальный : использует значение по умолчанию, которое видимое
  • наследование : устанавливает переполнение на значение его родительского элемента.

Помните, что текст будет естественным образом переноситься в конце элемента (если не будет изменен пробел), поэтому текст редко будет причиной переполнения. Если не задана высота, текст также будет увеличивать высоту элемента. Переполнение чаще возникает, когда явно заданы ширина и высота, и было бы нежелательно, чтобы какой-либо контент выплескивался наружу, или когда прокрутки явно избегают.

visible

Если вы вообще не устанавливаете свойство переполнения, значение по умолчанию отображается. Таким образом, в общем случае нет причин явно устанавливать для этого свойства значение visible, если только вы не переопределяете его установку в другом месте.

Здесь важно помнить, что даже несмотря на то, что содержимое видно за пределами поля, это содержимое не влияет на поток страницы. Например:

Как правило, вы все равно не должны устанавливать статическую высоту для блоков с веб-текстом, поэтому она не должна появляться.

скрытый

Противоположность видимому по умолчанию скрытому . Это буквально скрывает любой контент, выходящий за рамки коробки.

Это особенно полезно при использовании динамического содержимого и возможности переполнения, вызывающего серьезные проблемы с макетом. Однако имейте в виду, что контент, скрытый таким образом, совершенно недоступен (за исключением просмотра источника). Так, например, у пользователя установлен размер шрифта по умолчанию больше, чем вы ожидаете, вы можете вытолкнуть текст за пределы поля и полностью скрыть его от их взгляда.

scroll

Установка значения переполнения поля для прокрутки скроет содержимое от рендеринга вне поля, но предложит полосы прокрутки для прокрутки внутренней части поля для просмотра содержимого.

Примечательно, что с этим значением вы получаете ОБА горизонтальную и вертикальную полосы прокрутки, несмотря ни на что, даже если содержимое требует только одного или другого.

Прокрутка импульса iOS может быть включена для этого значения с помощью -webkit-overflow-scrolling .

Примечание: В OS X Lion, когда полосы прокрутки настроены на отображение только при использовании, scroll ведет себя больше как auto , в котором будут отображаться только необходимые полосы прокрутки.

auto

Автопереполнение очень похоже на значение прокрутки, только решает проблему получения полос прокрутки, когда они вам не нужны. Полосы прокрутки будут отображаться только в том случае, если есть контент, который фактически выходит за пределы элемента.

переполнение-x и переполнение-y

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

 . box {
  переполнение-y: скрыто;
  переполнение-x: прокрутка;
}

Очистка с плавающей запятой

Как ни странно, одним из наиболее популярных способов использования установки переполнения является очистка с плавающей запятой. Установка переполнения не очищает поплавок у элемент, он самоочищается . Это означает, что элемент с переполнением (любое значение, кроме visible ) будет расширяться настолько, насколько это необходимо, чтобы охватить дочерние элементы внутри, которые плавают (вместо схлопывания), предполагая, что высота не объявлена. Вот так:

Лучшим методом очистки с плавающей запятой является clearfix, так как он не требует от вас изменения свойства переполнения ненужным вам способом.

Генерация контекста форматирования блока

Интересно отметить, что переполнение также создаст новый контекст форматирования блока, который полезен, если мы хотим выровнять блочный элемент рядом с плавающим. В приведенном ниже примере мы показываем, как несколько абзацев будут взаимодействовать с плавающим изображением по умолчанию, а затем мы используем overflow: hidden для выравнивания текста в своем собственном поле:

Это взято из отличного поста Николь Салливан, который был чтобы вдохновить медиа-объект.

Можно ли стилизовать полосы прокрутки с помощью CSS?

Раньше вы могли стилизовать полосы прокрутки в IE (v5.5?), но не более того. Теперь вы снова можете стилизовать их в браузерах WebKit. Если вам нужны настраиваемые полосы прокрутки для разных браузеров, обратите внимание на JavaScript.

Если к элементу необходимо добавить полосы прокрутки для учета значения переполнения, Firefox помещает их за пределы элемента, сохраняя видимую ширину/высоту заявленной. IE помещает полосы прокрутки внутрь, сохраняя общую ширину/высоту заявленной.

Демонстрация

Демонстрации для этой статьи взяты со страницы с образцами.

Browser Support

Desktop
Chrome Firefox IE Edge Safari
90 81 11 90 16.

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *