Зробити поділ вертикально прокручуваним за допомогою 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 id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">

overflow-x : Властивість overflow-x визначає, що робити з лівим / правим ребрами вмісту - якщо він переповнює область вмісту елемента.
overflow-y : Властивість overflow-y визначає, що робити з верхніми / нижніми краями вмісту - якщо він переповнює область вмісту елемента.

Значення
Видимі : Значення по замовчуванню. Вміст не відсікається, і він може бути відображений поза вікном вмісту.
приховано : Вміст відсікається - і механізм прокрутки не передбачений.
прокрутка : вміст відсікається і надається механізм прокрутки.
auto : повинен спричинити механізм прокрутки для переповнених коробок.
початковий : Встановлює це властивість за замовчуванням.
успадковує Успадковує це властивість від його батьківського елемента.

Ви можете використовувати 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>

Проблема з усіма цими відповідями для мене полягала в тому, що вони не відповідали. Я повинен був мати фіксовану висоту для батьківського діва, якого я не хотів. Я також не хотів витрачати багато часу, курячи навколо медіа-запитів. Якщо ви використовуєте кутовий, ви можете скористатися набором завантажувачів, і це зробить всю важку роботу за вас. Ви зможете прокручувати внутрішній вміст, і він буде чуйним. Коли ви налаштовуєте вкладку, зробіть це так: $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;}