CSS max-height và tràn auto luôn hiển thị dọc cuộn

Question

Tôi có một lớp div thiết lập với phong cách CSS sau:

div.multiple_choice{ 
    border: 1px solid black; 
    max-width: 300px; 
    max-height: 200px; 
    overflow: auto; 
} 

Vấn đề là, khi văn bản bên trong không buộc các DIV để đạt được chiều cao tối đa 200px, thanh cuộn dọc vẫn hiển thị. Tôi có thể nhấp vào mũi tên lên và xuống nhưng nó chỉ di chuyển nội dung lên và xuống khoảng một hoặc hai pixel.

này được xảy ra trong Google Chrome (phiên bản 18.0) và Iceweasel 11.

Answer 1

Khi nó quay ra, một phong cách CSS đã gây ra vấn đề:

body{ 
    line-height: 1; 
} 

Bất cứ ai quan tâm đến việc tìm hiểu về làm thế nào và tại sao điều này sẽ gây ra một vấn đề, có thể đọc về tài sản line-height here

Answer 2

tôi có gặp problem.But này tôi giải quyết này sử dụng phong cách css sau:

div.yourcontainer{overflow-y:auto;} 

Nếu vùng chứa cao hơn chiều cao tối đa, thanh cuộn dọc sẽ hiển thị.

Answer 3

Tôi cũng gặp sự cố này khi sử dụng Bootstrap và nav. Nó xảy ra vì bootstrap definds li trong nav-tabs như: .nav-tabs > li { margin-bottom:-1px; }. Để chống lại điều này, bạn cũng phải làm:

.nav-tabs > li:last-child { 
    margin-bottom:0; 
} 

---

Nếu không thiết lập cuối cùng con, ví dụ sau sẽ luôn hiển thị di chuyển, bất kể có bao nhiêu nội dung có trong danh sách:

<ul class="navs nav-tabs nav-stacked" style="max-height:80px;overflow:auto;"> 
    <li></li> 
    ... 
</ul> 

Answer 4

Tôi đã gặp lỗi này trước đó ngày hôm nay. Trong trường hợp của tôi một danh sách các phần tử con đã hiển thị: inline-block thay vì display: block. Chuyển sang hiển thị: chặn danh sách các phần tử con của tôi trong div bị cắt bớt đã khắc phục sự cố cho tôi.

Answer 5

Tôi gặp sự cố với điều này và tôi thấy rằng có position: relative trên các yếu tố con đã gây ra sự cố. Rõ ràng đây không thể là giải pháp cho tất cả mọi người, đặc biệt nếu position: absolute đang được sử dụng, nhưng đối với tôi nó đã hoạt động.

Answer 6

Tôi có vấn đề này khi cố gắng quấn một danh sách (cột flex) của phản ứng thành phần trong một div, tôi giải quyết nó bằng cách thay đổi biên độ của các yếu tố bên trong mỗi mục là 0.

Phương pháp để khắc phục sự cố này đối với tôi là kiểm tra các mục trong danh sách (có lẽ mỗi <li> trong OP) và xem những kiểu nào khiến cho div nghĩ rằng mỗi mục danh sách lớn hơn so với những gì có thể nhìn thấy bằng mắt người.

Dưới đây là một ví dụ về kiểm tra biên giả mạo vào một biểu tượng trong mục danh sách trong dự án của tôi:

Giải pháp là để thiết lập phong cách của biểu tượng đó để có một biên độ thẳng đứng từ 0, mặc dù trong tôi ứng dụng Tôi chỉ cần thực hiện tất cả các lề 0 và thêm một số padding-phải.