Tạo một div theo chiều dọc có thể cuộn bằng CSS

Điều này

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

cung cấp cho divngười dùng có thể cuộn theo cả chiều ngang và chiều dọc. Làm cách nào để thay đổi nó để div chỉ có thể cuộn theo chiều dọc?

Bạn có nó được bảo hiểm ngoài việc sử dụng tài sản sai. Scrollbar thể được kích hoạt với bất kỳ tài sản overflow, overflow-xhoặc overflow-yvà mỗi có thể được thiết lập để bất kỳ visible, hidden, scroll, auto, hoặc inherit. Bạn hiện đang xem xét hai điều này:

• auto- Giá trị này sẽ nhìn vào chiều rộng và chiều cao của hộp. Nếu chúng được xác định, nó sẽ không để hộp mở rộng vượt qua các ranh giới đó. Thay vào đó (nếu nội dung vượt quá các ranh giới đó), nó sẽ tạo một thanh cuộn cho cả hai ranh giới (hoặc cả hai) vượt quá độ dài của nó.

• scroll- Giá trị này buộc một thanh cuộn, bất kể là gì, ngay cả khi nội dung không vượt quá giới hạn được đặt. Nếu nội dung không cần phải cuộn, thanh sẽ xuất hiện dưới dạng "bị vô hiệu hóa" hoặc không tương tác.

Nếu bạn luôn muốn thanh cuộn dọc xuất hiện:

Bạn nên sử dụng overflow-y: scroll. Điều này buộc một thanh cuộn xuất hiện cho trục dọc cho dù có cần hay không. Nếu bạn thực sự không thể cuộn ngữ cảnh, nó sẽ xuất hiện dưới dạng thanh cuộn "bị vô hiệu hóa".

Nếu bạn chỉ muốn một thanh cuộn xuất hiện nếu bạn có thể cuộn hộp:

Chỉ cần sử dụng overflow: auto. Vì nội dung của bạn theo mặc định chỉ bị ngắt sang dòng tiếp theo khi nó không thể vừa với dòng hiện tại, nên một thanh cuộn ngang sẽ không được tạo (trừ khi nó nằm trên một phần tử bị vô hiệu hóa từ). Đối với thanh dọc, nó sẽ cho phép nội dung mở rộng theo chiều cao bạn đã chỉ định. Nếu vượt quá chiều cao đó, nó sẽ hiển thị thanh cuộn dọc để xem phần còn lại của nội dung, nhưng sẽ không hiển thị thanh cuộn nếu nó không vượt quá chiều cao.

Hãy thử như thế này.

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

Để sử dụng 100% chiều cao khung nhìn:

overflow: auto;
max-height: 100vh;

Sử dụng overflow-y: auto;trên div.

Ngoài ra, bạn cũng nên thiết lập chiều rộng.

Bạn có thể sử dụng mã này để thay thế.

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

overflow-x : Thuộc tính overflow-x chỉ định phải làm gì với các cạnh trái / phải của nội dung - nếu nó tràn ra vùng nội dung của phần tử.
overflow-y : Thuộc tính overflow-y chỉ định những việc cần làm với các cạnh trên / dưới của nội dung - nếu nó tràn ra vùng nội dung của phần tử.

Giá trị
hiển thị : Giá trị mặc định. Nội dung không được cắt bớt và nó có thể được hiển thị bên ngoài hộp nội dung.
ẩn : Nội dung bị cắt bớt - và không có cơ chế cuộn nào được cung cấp.
cuộn : Nội dung được cắt bớt và một cơ chế cuộn được cung cấp.
tự động : Sẽ khiến một cơ chế cuộn được cung cấp cho các hộp tràn.
ban đầu : Đặt thuộc tính này về giá trị mặc định của nó.
kế thừa Kế thừa thuộc tính này từ phần tử cha của nó.

Bạn có thể sử dụng overflow-y: scrollđể cuộn dọc.

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

Vấn đề với tất cả những câu trả lời này đối với tôi là chúng không phản hồi. Tôi phải có một chiều cao cố định cho một div cha mà tôi không muốn. Tôi cũng không muốn mất nhiều thời gian để tìm hiểu các phương tiện truyền thông. Nếu bạn đang sử dụng angular, bạn có thể sử dụng tab bootstraps và nó sẽ làm tất cả công việc khó khăn cho bạn. Bạn sẽ có thể cuộn nội dung bên trong và nó sẽ được phản hồi. Khi bạn thiết lập tab, hãy làm như thế này: $scope.tab = { title: '', url: '', theclass: '', ative: true };... vấn đề là, bạn không muốn có tiêu đề hoặc biểu tượng hình ảnh. sau đó ẩn đường viền của tab trong cs như thế này:

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

và cũng thế này .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} và cuối cùng để xóa tab vô hình mà bạn vẫn có thể nhấp vào nếu bạn không thực hiện điều này:.nav > li > a {padding:0px;margin:0px;}