Membuat div dapat digulir secara vertikal menggunakan CSS

Ini

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

memberikan divbahwa pengguna dapat menggulir secara horizontal dan vertikal. Bagaimana cara mengubahnya sehingga div hanya dapat digulir secara vertikal?

Anda telah menutupinya selain menggunakan properti yang salah. Scrollbar dapat dipicu dengan properti apapun overflow, overflow-xatau overflow-ydan masing-masing dapat diatur untuk setiap visible, hidden, scroll, auto, atau inherit. Anda sedang melihat dua ini:

• auto- Nilai ini akan terlihat pada lebar dan tinggi kotak. Jika mereka didefinisikan, itu tidak akan membiarkan kotak memperluas melewati batas-batas itu. Alih-alih (jika konten melebihi batas itu), itu akan membuat bilah gulir untuk batas (atau keduanya) yang melebihi panjangnya.

• scroll- Nilai ini memaksa bilah gulir, apa pun yang terjadi, meskipun konten tidak melebihi batas yang ditetapkan. Jika konten tidak perlu digulir, bilah akan muncul sebagai "dinonaktifkan" atau non-interaktif.

Jika kamu selalu ingin bilah gulir vertikal muncul:

Anda harus menggunakan overflow-y: scroll. Ini memaksa bilah gulir muncul ke sumbu vertikal, baik diperlukan atau tidak. Jika Anda tidak dapat benar-benar menggulirkan konteks, itu akan muncul sebagai scrollbar "dinonaktifkan".

Jika Anda hanya ingin bilah gulir muncul jika Anda dapat menggulir kotak:

Gunakan saja overflow: auto. Karena konten Anda secara default hanya terpecah ke baris berikutnya ketika tidak dapat masuk ke baris saat ini, scrollbar horizontal tidak akan dibuat (kecuali jika pada elemen yang pembungkusan kata dinonaktifkan). Untuk bilah vertikal, itu akan memungkinkan konten untuk memperluas hingga ketinggian yang Anda tentukan. Jika melebihi ketinggian itu, itu akan menampilkan scrollbar vertikal untuk melihat sisa konten, tetapi tidak akan menampilkan scrollbar jika tidak melebihi ketinggian.

Coba seperti ini.

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

Untuk penggunaan tinggi viewport 100%:

overflow: auto;
max-height: 100vh;

Gunakan overflow-y: auto;di div.

Juga, Anda harus mengatur lebar juga.

Anda dapat menggunakan kode ini sebagai gantinya.

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

overflow-x : Properti overflow-x menentukan apa yang harus dilakukan dengan tepi kiri / kanan konten - jika meluap area konten elemen.
overflow-y : Properti overflow-y menentukan apa yang harus dilakukan dengan tepi atas / bawah konten - jika meluap area konten elemen.

Nilai yang
terlihat : Nilai default. Konten tidak terpotong, dan itu dapat diberikan di luar kotak konten.
disembunyikan : Konten terpotong - dan tidak ada mekanisme pengguliran yang disediakan.
gulir : Konten terpotong dan mekanisme gulir disediakan.
otomatis : Seharusnya menyebabkan mekanisme gulir disediakan untuk kotak yang meluap.
initial : Setel properti ini ke nilai standarnya.
mewarisi Mewarisi properti ini dari elemen induknya.

Anda dapat menggunakan overflow-y: scrolluntuk pengguliran vertikal.

<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>

Masalah dengan semua jawaban ini bagi saya adalah mereka tidak responsif. Saya harus memiliki ketinggian tetap untuk div induk yang tidak saya inginkan. Saya juga tidak ingin menghabiskan banyak waktu untuk mencari-cari pertanyaan media. Jika Anda menggunakan sudut, Anda dapat menggunakan tab bootstraps dan itu akan melakukan semua kerja keras untuk Anda. Anda akan dapat menggulir konten dalam dan itu akan responsif. Saat Anda mengatur tab, lakukan seperti ini: $scope.tab = { title: '', url: '', theclass: '', ative: true };... intinya adalah, Anda tidak ingin judul atau ikon gambar. lalu sembunyikan garis besar tab di cs seperti ini:

.nav-tabs {
   border-bottom:none; 
} 

dan juga ini .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} dan akhirnya untuk menghapus tab tak terlihat yang masih dapat Anda klik jika Anda tidak menerapkan ini:.nav > li > a {padding:0px;margin:0px;}