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

этой

html lang-html prettyprint-override"><div id="" style="overflow:scroll; height:400px;">

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

414
css html

7 ответов

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

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

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

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

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

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

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

531

попробуйте так.

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

для высоты видового экрана 100% используйте:

overflow: auto;
max-height: 100vh;
85

использовать overflow-y: auto; на div.

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

44

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

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


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

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

20

можно использовать 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>
10

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