Làm cách nào để áp dụng thanh cuộn dọc vào div với chiều cao phần trăm?

Question

Tôi đã đi qua rất nhiều câu hỏi về bản chất tương tự nhưng tình hình của tôi là một chút khác nhau; thùng chứa bên ngoài của tôi là chiều cao 100% thay vì chiều cao cố định.

Tôi có một bó div s bên trong hộp chứa. Họ tràn và tôi muốn có một thanh cuộn để cho phép cuộn.

Đây chính là điều tôi muốn đạt được: http://jsfiddle.net/jcjw2jmo/

Trừ, liên kết Tôi đã đăng có một cố định height: 200px;. Thay vào đó, tôi muốn có chiều cao phần trăm.

Tôi đã thử đặt một tỷ lệ phần trăm height và max-height không có may mắn. Đây là sự tiến bộ của tôi: http://jsfiddle.net/k52eh0xr/

Làm cách nào để có cả hai trò chơi có cùng hành vi nhưng thay vào đó bằng cách sử dụng tỷ lệ phần trăm?

Cảm ơn rất nhiều

PS. Tôi biết điều này có thể được thực hiện bằng Javascript/jQuery nhưng tôi đang tìm kiếm một giải pháp CSS-chỉ

Answer 1

tôi nghĩ rằng bạn cần thiết lập của bạn tag html và body với height:100% vì vậy bạn có thể sử dụng phần trăm như bạn muốn

html, body {height:100%} 

DEMO

Answer 2

Sự cố bạn đang liên quan chủ yếu đến việc sử dụng tỷ lệ phần trăm cao trong CSS.

Nếu bạn định sử dụng chiều cao phần trăm trên phần tử con, bạn cần phải specify the percentage height for all parent elements tối đa và bao gồm các phần tử body và gốc (html).

Hãy thử điều này trong mã của bạn:

HTML (không thay đổi)

CSS

/* NEW */ 
html, body { 
    height: 100%; /* necessary when using percentage heights within body 
        on non-absolutely positioned children (such as .outer) 
        more info: https://stackoverflow.com/a/31728799/3597276 */ 
    overflow: hidden; /* prevent vertical scrollbar on browser window, 
         in conformance with demos posted in question */ 
} 

.outer { 
    border: 1px solid black; 
    height: 50%; /* ADJUSTED */ 
    /* max-height: 10%; REMOVED */ 
    overflow-y: scroll; 
    width: 300px; 
} 

.inner { 
    /* height: 10%; REMOVED 
    max-height: 10%; REMOVED */ 
} 

.item { 
    background: grey; 
    border: 1px solid red; 
    height: 50px; 
} 

DEMO: http://jsfiddle.net/k52eh0xr/5/