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

Эта

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

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

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

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

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

Если вы всегда хотите, чтобы появилась вертикальная полоса прокрутки:

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

Если вы хотите, чтобы появилась полоса прокрутки, если вы можете прокрутить поле:

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

Попробуй вот так.

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

Для 100% высоты окна просмотра:

overflow: auto;
max-height: 100vh;

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

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

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

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

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

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





наследовать Наследует это свойство от его родительского элемента.

Вы можете использовать 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's 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's 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's 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's 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's 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>

Проблема со всеми этими ответами для меня была в том, что они не реагировали. Я должен был иметь фиксированную высоту для родительского div, который я не хотел. Я также не хотел тратить кучу времени на изучение медиа-запросов. Если вы используете angular, вы можете использовать загрузчик 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;}