Создание div с вертикальной прокруткой с использованием CSS

Ответ 1

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

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

• scroll - Эти значения заставляют полосу прокрутки, несмотря ни на что, даже если содержимое не превышает граничный набор. Если содержимое не нужно прокручивать, панель отображается как "отключенная" или не интерактивная.

Если вам всегда нужна вертикальная полоса прокрутки:

Вы должны использовать overflow-y: scroll. Это заставляет полосу прокрутки появляться для вертикальной оси независимо от того, нужна она или нет. Если вы не можете прокручивать контекст, он будет отображаться как "отключенная" полоса прокрутки.

Если вам нужна только полоса прокрутки, если вы можете прокрутить эту рамку:

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

Ответ 2

Попробуйте это.

<div style="overflow-y: scroll; height:400px;">

Ответ 3

Для использования высоты экрана в 100%:

overflow: auto;
max-height: 100vh;

Ответ 4

Используйте overflow-y: auto; в div.

Кроме того, вы должны также установить ширину.

Ответ 5

Вместо этого вы можете использовать этот код.

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">

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

Значения изображения видимый: значение по умолчанию. Содержимое не обрезается, и оно может отображаться вне поля содержимого.
скрытый. Содержимое обрезается - и не предоставляется механизм прокрутки.
прокрутка: содержимое обрезается и предоставляется механизм прокрутки.
Авто. Должно возникнуть механизм прокрутки для переполнения ящиков.
начальный. Устанавливает это свойство по умолчанию.
inherit Наследует это свойство от его родительского элемента.

Ответ 6

Проблема со всеми этими ответами для меня заключалась в том, что они не реагировали. Я должен был иметь фиксированную высоту для родительского div, которого я не хотел. Я также не хотел тратить много времени на размышления со средствами массовой информации. Если вы используете angular, вы можете использовать tabstraps tabset, и он сделает всю тяжелую работу для вас. Вы сможете прокручивать внутренний контент, и он будет реагировать. Когда вы настраиваете вкладку, сделайте следующее: $scope.tab = { title: '', url: '', theclass: '', ative: true };... Дело в том, что вам не нужен значок названия или изображения. затем скройте контур вкладки в cs следующим образом: .nav-tabs { border-bottom:none; }, а также этот .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} и, наконец, удалить невидимую вкладку, которую вы еще можете нажать, если вы не реализуете это: .nav > li > a {padding:0px;margin:0px;}

Ответ 7

Вы можете использовать overflow-y: scroll для вертикальной прокрутки.

<div  style="overflow-y:scroll; height:400px; background:gray">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
 </div>