Html overflow: overflow-y | htmlbook.ru

Leave a Comment / Html / By /

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

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

overflow: auto;

Пошаговый план! Как быстро научиться создавать сайты!

Chrome

Все

Edge

Все

FireFox

Все

iOS Safari

Все

Opera

Все

Safari

Все

Значения

overflow: visible;

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

<style>
.example-1 {
    width: 150px;
    height: 150px;
    overflow: visible;
    background: #55bb61;
}
</style>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum
    at magnam officia iusto amet in iste deserunt dolores
    accusantium fugit quam culpa fugiat!</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum at magnam officia iusto amet in iste deserunt dolores accusantium fugit quam culpa fugiat!

overflow: hidden;

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

<style>
.example-2 {
    width: 150px;
    height: 150px;
    overflow: hidden;
    background: #55bb61;
}
</style>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum
    at magnam officia iusto amet in iste deserunt dolores
    accusantium fugit quam culpa fugiat!</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum at magnam officia iusto amet in iste deserunt dolores accusantium fugit quam culpa fugiat!

overflow: scroll;

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

Полосы прокрутки всегда будут видны. Используя один параметр вы автоматически задаете значение для X и Y осей.

<style>
.example-3 {
    width: 150px;
    height: 150px;
    overflow: scroll;
    background: #55bb61;
}
</style>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum
    at magnam officia iusto amet in iste deserunt dolores
    accusantium fugit quam culpa fugiat!</p>
</div>
<br>
<div>
    <p>Lorem ipsum dolor sit amet</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum at magnam officia iusto amet in iste deserunt dolores accusantium fugit quam culpa fugiat!

Lorem ipsum dolor sit amet

overflow: auto;

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

<style>
.example-4 {
    width: 150px;
    height: 150px;
    overflow: auto;
    background: #55bb61;
}
</style>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum
    at magnam officia iusto amet in iste deserunt dolores
    accusantium fugit quam culpa fugiat!</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum at magnam officia iusto amet in iste deserunt dolores accusantium fugit quam culpa fugiat!

overflow: hidden auto;

Используя два параметра вы можете задавать разные значения для X и Y осей.

<style>
.example-5 {
    width: 150px;
    height: 150px;
    overflow: hidden auto;
    background: #55bb61;
}
</style>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum
    at magnam officia iusto amet in iste deserunt dolores
    accusantium fugit quam culpa fugiat!</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, dolorum, nesciunt, reiciendis nam quo tempora cum at magnam officia iusto amet in iste deserunt dolores accusantium fugit quam culpa fugiat!

Читайте также
Обсуждение (1)

CSS свойство overflow

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

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

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

  • overflow-x
  • overflow-y

Контент выходит за границы, если высота и ширина контейнера установлены.

Свойство overflow имеет следующие значения:

  • visible
  • hidden
  • scroll
  • auto
  • overlay

Значение «overlay» является устаревшим.

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      background-color: #ccc;
      width: 300px;
      height: 200px;
      overflow: visible;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства overflow</h3>
    <h4>overflow: visible</h4>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
 
 
 
 </p>
  </body>
</html>

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      background-color: #ccc;
      width: 300px;
      height: 200px;
      overflow: scroll;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства overflow</h3>
    <h4>overflow: scroll</h4>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
  </p>
  </body>
</html>

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

Пример со значением «hidden», где контент обрезается, чтобы поместиться в блоке:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      background-color: #ccc;
      width: 300px;
      height: 200px;
      overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства overflow</h3>
    <h4>overflow: hidden</h4>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.
 
  Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
  </body>
</html>

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

Пример со всеми значениями свойства:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.scroll {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: scroll;
      }
      div.hidden {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: hidden;
      }
      div.auto {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: auto;
      }
      div.visible {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: visible;
      }
      div.
  overlay {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: overlay;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства overflow</h3>
    <h4>overflow: scroll</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
    <h4>overflow: hidden</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
 
  Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
    <h4>overflow: auto</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.  Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
    <h4>overflow: visible</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
    <br/>
    <br/>
    <h4>overflow: overlay</h4>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.  Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
  </body>
</html>

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

Свойство CSS scroll-padding

❮ Назад Полное руководство по CSS Далее ❯


Пример

Отключить привязку прокрутки:

div {
  overflow-anchor: none;
}

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

Определение и использование

Свойство overflow-anchor позволяет отключить привязку прокрутки.

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

Значение по умолчанию: авто
Унаследовано: нет
Анимация: нет. Читать о анимированном
Версия: CSS3
Синтаксис JavaScript: объект .style.overflowAnchor=»none» Попробуй

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
анкер перелива 56,0 79,0 66,0 Не поддерживается 43,0

Синтаксис CSS

overflow-anchor: auto|none|initial|inherit;

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

Значение Описание
авто Значение по умолчанию. Привязка прокрутки включена
нет Привязка прокрутки отключена
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник CSS: Переполнение CSS

Свойство переполнения CSS: Свойство переполнения CSS

❮ Назад Полное руководство по CSS Следующий ❯


НАБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top1s Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Авторское право 1999-2023 по данным Refsnes. Все права защищены.
W3Schools работает на основе W3.CSS.

css — разница между HTML «переполнение: авто» и «переполнение: прокрутка»

спросил

Изменено 2 года, 6 месяцев назад

Просмотрено 73 тысячи раз

Когда я изучал overflow , я наткнулся на эти два значения: auto и scroll , которые добавляют полосы прокрутки, если содержимое переполняет элемент.

Может кто-нибудь объяснить мне, в чем разница между ними?

  • html
  • css

Авто будет отображать полосу прокрутки только тогда, когда какой-либо контент обрезан.

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

4

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

переполнение: auto очень похоже, но полосы прокрутки появляются только при переполнении содержимого.

Здесь есть аналогичное объяснение с несколькими скриншотами для иллюстрации.

0

Взгляните на хитрости CSS.

Авто будет показывать полосу прокрутки тогда и только тогда, когда содержимое переполняется; но прокрутка всегда будет отображать полосу прокрутки, независимо от того, переполняется содержимое или нет.

Добавление точки к ответу, Переполнение: авто не работает в IE7, когда позиция контейнера является абсолютной Положение относительно переполнения IE7. Но установка Overflow:scroll работает

overflow: scroll будет отображать как горизонтальную, так и вертикальную полосу прокрутки, даже если вам не нужна ни та, ни другая. while, overflow: auto покажет полосу прокрутки, которая нужна вашему div. так что в основном auto поможет вам избавиться от обеих полос прокрутки. Вот еще:

The CSS Overflow Property

В Windows при переполнении: прокрутка всегда будет отображаться полоса прокрутки, а при переполнении: автоматически полоса прокрутки будет отображаться только в том случае, если содержимое переполняется. В macOS overflow: scroll и overflow: auto всегда будут отображать полосу прокрутки, если содержимое переполняется. Проверено в Хроме. Я настоятельно рекомендую использовать overflow: auto, так как он работает точно так же и не создает проблем в Windows

.

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

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