Как добавить элементу полосу прокрутки по вертикали: overflow-y | htmlbook.ru

Содержание

Свойство overflow

`;document.write(t),showTopNotification()}}

ARعربي
ENEnglish
ESEspañol
FAفارسی
FRFrançais
IDIndonesia

ITItaliano
JA日本語
KO한국어
RUРусский
TRTürkçe
UKУкраїнська

ZH简体中文

Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на свой язык

КупитьEPUB/PDF

8 сентября 2019 г.

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

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

Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое «переполняет» блок. Его отображение в этом случае задаётся свойством overflow.

Возможные значения

visible (по умолчанию)
hidden
scroll
auto

Если не ставить overflow явно или поставить visible, то содержимое отображается за границами блока.

Например:

<style>
  .overflow {
    /* overflow не задан */
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>
<div>
  visible ЭтотТекстВылезаетСправаЭтотТекстВылезаетСправа
  Этот текст вылезает снизу Этот текст вылезает снизу
  Этот текст вылезает снизу Этот текст вылезает снизу
</div>

Как правило, такое переполнение указывает на ошибку в вёрстке. Если содержимое может быть больше контейнера – используют другие значения.

Переполняющее содержимое не отображается.

<style>
  .overflow {
    overflow: hidden;
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>
<div>
  hidden ЭтотТекстОбрезанСправаЭтотТекстОбрезанСправа
  Этот текст будет обрезан снизу Этот текст будет обрезан снизу
  Этот текст будет обрезан снизу Этот текст будет обрезан снизу
</div>

Вылезающее за границу содержимое становится недоступно.

Это свойство иногда используют от лени, когда какой-то элемент дизайна немного вылезает за границу, и вместо исправления вёрстки его просто скрывают.

Как правило, долго оно не живёт, вёрстку всё равно приходится исправлять.

При переполнении отображается полоса прокрутки.

<style>
  .overflow {
    overflow: auto;
    width: 200px;
    height: 100px;
    border: 1px solid black;
  }
</style>
<div>
  auto ЭтотТекстДастПрокруткуСправаЭтотТекстДастПрокруткуСправа
  Этот текст даст прокрутку снизу Этот текст даст прокрутку снизу
  Этот текст даст прокрутку снизу
</div>

Полоса прокрутки отображается всегда.

<style>
  .overflow {
    overflow: scroll;
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>
<div>
  scroll
  Переполнения нет.
</div>

То же самое, что auto, но полоса прокрутки видна всегда, даже если переполнения нет.

Можно указать поведение блока при переполнении по ширине в overflow-x и высоте – в overflow-y:

<style>
  .overflow {
    overflow-x: auto;
    overflow-y: hidden;
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>
<div>
  ПоШиринеПолосаПрокруткиAutoПоШиринеПолосаПрокруткиAuto
  Этот текст вылезает снизу Этот текст вылезает снизу
  Этот текст вылезает снизу Этот текст вылезает снизу
</div>

Свойства overflow-x/overflow-y

(или оба одновременно: overflow) задают поведение контейнера при переполнении:

visible: По умолчанию, содержимое вылезает за границы блока.
hidden: Переполняющее содержимое невидимо.
auto: Полоса прокрутки при переполнении.
scroll: Полоса прокрутки всегда.

Кроме того, значение overflow: auto | hidden изменяет поведение контейнера, содержащего float. Так как элемент с float находится вне потока, то обычно контейнер не выделяет под него место. Но если стоит такой

overflow, то место выделяется, т.е. контейнер растягивается. Более подробно этот вопрос рассмотрен в статье Свойство float.

Предыдущий урокСледующий урок

Карта учебника

© 2007—2023 Илья Кантор
о проекте
связаться с нами
пользовательское соглашение
политика конфиденциальности

overflow-block — CSS | MDN

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

Примечание: Свойство overflow-block отображается на overflow-y (en-US) или overflow-x (en-US) в зависимости от режима записи документа.

/* Значения свойства */
overflow-block: visible;
overflow-block: hidden;
overflow-block: scroll;
overflow-block: auto;
/* Глобальные значения */
overflow-block: inherit;
overflow-block: initial;
overflow-block: unset;

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

Значения

visible: Содержимое не обрезается и может отображаться за пределами начального и конечного краёв блока отступа.
hidden: При необходимости содержимое обрезается, чтобы соответствовать размеру блока в поле заполнения. Полосы прокрутки отсутствуют.
scroll: При необходимости содержимое обрезается, чтобы поместиться в размер блока в поле заполнения. Браузеры отображают полосы прокрутки вне зависимости от того, вырезано ли содержимое. (Это предотвращает появление или исчезновение полос прокрутки при изменении содержимого.) Принтеры могут по-прежнему печатать переполненное содержимое.
auto: Зависит от пользовательского агента. Если содержимое помещается в поле дополнения, оно выглядит так же, как visible, но всё же устанавливает новый контекст форматирования блока. Настольные браузеры устанавливают полосы прокрутки, если содержимое переполняется.

Формат синтаксиса

overflow-block = 
<'overflow'>

HTML

<ul>
  <li><code>overflow-block:hidden</code> — скрывает текст за пределами поля
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
  <li><code>overflow-block:scroll</code> — всегда добавляет полосу прокрутки
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
  <li><code>overflow-block:visible</code> — отображает текст вне поля, если это необходимо
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
    </div>
  </li>
  <li><code>overflow-block:auto</code> — в большинстве браузеров, что эквивалентно <code>scroll</code>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>

CSS

#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width:  250px;
  height: 100px;
}
#div1 { overflow-block: hidden; margin-bottom: 12px;}
#div2 { overflow-block: scroll; margin-bottom: 12px;}
#div3 { overflow-block: visible; margin-bottom: 120px;}
#div4 { overflow-block: auto; margin-bottom: 120px;}

Результат

Specification
CSS Overflow Module Level 3 # logical

Начальное значение	`auto`
Применяется к	Block-containers, flex containers, and grid containers
Наследуется	нет
Обработка значения	as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` (en-US) or `overflow-y` (en-US) is neither `visible` nor clip
Animation type	discrete

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Связанные свойства CSS: text-overflow (en-US), white-space, overflow, overflow-inline (en-US), overflow-x (en-US), overflow-y (en-US), clip (en-US), display
Логические свойства CSS (en-US)
Режимы письма

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

css — HTML: как создать DIV только с вертикальными полосами прокрутки для длинных абзацев?

спросил 12 лет, 11 месяцев назад

Изменено 1 год, 8 месяцев назад

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

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

В настоящее время я использую этот код:

 
 текст текст текст текст текст текст текст текст текст текст
 текст текст текст текст текст текст текст текст текст текст
 текст текст текст текст текст текст текст текст текст текст
 текст текст текст текст текст текст текст текст текст текст
 текст текст текст текст текст текст текст текст текст текст
 текст текст текст текст текст текст текст текст текст текст
 текст текст текст текст текст текст текст текст текст текст
 текст текст текст текст текст текст текст текст текст текст

Две проблемы:

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

css
html
переполнение

Использовать переполнение-y . Это свойство CSS 3.

чтобы скрыть горизонтальные полосы прокрутки, вы можете сделать overflow-x скрытым, например:

 overflow-x: hidden;

Нужно указать ширину и высоту в px :

 width: 10px; высота: 10 пикселей;

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

Поэтому вы можете попробовать следующее:

 
  текст текст текст текст текст текст текст текст текст текст
  текст текст текст текст текст текст текст текст текст текст
  текст текст текст текст текст текст текст текст текст текст
  текст текст текст текст текст текст текст текст текст текст
  текст текст текст текст текст текст текст текст текст текст
  текст текст текст текст текст текст текст текст текст текст
  текст текст текст текст текст текст текст текст текст текст
  текст текст текст текст текст текст текст текст текст текст

В любом случае установите overflow-x на hidden , и я предпочитаю устанавливать max-height , чтобы ограничить расширение высоты div. Ваш код должен выглядеть так:

 overflow-y: scroll;
переполнение-x: скрыто;
максимальная высота: 450 пикселей;

Сначала спасибо

Используйте overflow:auto у меня работает.

горизонтальная полоса прокрутки исчезает.

Чтобы показать вертикальную полосу прокрутки в вашем div, вам нужно добавить

 height: 100px;
переполнение-у: прокрутка;

или

 высота: 100 пикселей;
переполнение-у: авто;

 переполнение-y : прокрутка;
переполнение-х: скрыто;

высота необязательна

Вы можете использовать свойство переполнения

 стиль = "переполнение: прокрутка; макс.

Я также столкнулся с той же проблемой… попробуйте сделать это… это сработало для меня

 .scrollBbar
        {
        положение: фиксированное;
        верх: 50 пикселей;
        дно:0;
        слева:0;
        ширина: 200 пикселей;
        переполнение-х: скрыто;
        переполнение-у: авто;
       }

Это мой микс:

 overflow-y: scroll;
высота: 13см; // Начальная высота. 
изменить размер: вертикальный; // Разрешить пользователю изменять размер по вертикали.
максимальная высота: 31em; // Если вы хотите ограничить максимальный размер.

Иногда это помогает: Помните, что вертикальная полоса прокрутки занимает горизонтальное пространство. Возможно, у вас был дисплей, который хорошо работает с ширина: 100% и слишком мало контента для вертикальной полосы прокрутки. Затем, когда вы добавляете больше контента, вы получаете вертикальную полосу прокрутки — как и ожидалось — но в то время как содержимое оборачивает свое переполнение в div, также появляется раздражающая горизонтальная полоса прокрутки. Причина в том, что сама вертикальная полоса прокрутки занимает некоторое пространство по горизонтали, а горизонтальная полоса позволяет читателю прокручивать страницу под вертикальной полосой прокрутки. Обойти это можно, сократив ширину. например ширина: 95% удалит горизонтальную полосу, показав только вертикальную.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Как добавить вертикальную полосу прокрутки к определенному ul > li в раскрывающемся меню

спросил 4 года 11 месяцев назад

Изменено 4 года, 11 месяцев назад

Просмотрено 4к раз

Как настроить таргетинг на определенный элемент ul > li в раскрывающемся меню? Предупреждение заключается в том, что я не могу редактировать HTML (элементы навигации) напрямую, он создается автоматически с помощью инструмента, который я использую. Тем не менее, я могу в некоторой степени манипулировать CSS. Итак, мне было интересно, есть ли способ настроить таргетинг на конкретную ul > li , чтобы добавить вертикальную полосу прокрутки.

Мне нужно нацелиться на ul > li из Подменю 3 , как показано в коде ниже. Обратите внимание, что эти классы автоматически генерируются инструментом. Я попытался использовать псевдокласс :nth-child() , но думаю, что делаю это неправильно.

 <ул>
  Главное меню
    <ул>
      
Подменю 1
      Подменю 2
      **Подменю 3**
        <ул>
          
Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент

html
css
css-селекторы
псевдокласс

Используйте > , чтобы спускаться вниз по DOM и выбирать nth-menu каждый раз, используя select() 09-0-type() nth-035 nth-035 правильный.

Можно добавить полосу прокрутки, ограничивая высоту до максимума и добавляя overflow-y:auto , чтобы добавить полосу прокрутки, если содержимое элемента выше.

Чтобы выбрать n-й элемент в

 , просто сделайте то же самое, но укажите n-й тип  ли  вместо.
 .sub-menu>li>.sub-menu:nth-of-type(1) {
  переполнение-у: авто;
  максимальная высота: 10em;
}

.sub-menu>li>.sub-menu:nth-of-type(1)>li:nth-of-type(3) {
  фон: красный;
} 
 <ул>
  Главное меню
    <ул>
      
Подменю 1
      Подменю 2
      **Подменю 3**
        <ул>
          
Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент
          Элемент


      
      1
 Если это ваш вывод HTML, вы можете настроить таргетинг на этот элемент 
  и перейти оттуда.No related posts.

Как добавить элементу полосу прокрутки по вертикали: overflow-y | htmlbook.ru

Свойство overflow

overflow-block — CSS | MDN

Значения

Формат синтаксиса

HTML

CSS

Результат

Found a content problem with this page?

css — HTML: как создать DIV только с вертикальными полосами прокрутки для длинных абзацев?

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

html — Как добавить вертикальную полосу прокрутки к определенному ul > li в раскрывающемся меню

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

Рубрики

Рубрики