Cuộn bên trong thanh bên cố định

Question

Tôi có một thanh bên cố định ở bên trái trang web của tôi với nội dung có quá nhiều nội dung để hiển thị trên màn hình. Làm cách nào để tôi có thể cuộn nội dung đó trong khi vẫn cho phép bên phải có thể cuộn được?

Tôi nghĩ rằng một đơn giản overflow-y: scroll; sẽ đủ. Có vẻ như tôi cần phải có chiều cao tối đa trên thanh bên, nhưng đặt độ cao tối đa thành 100% thì không có gì. Tôi chắc chắn đây là một mẫu mã đơn giản, nhưng than ôi, kỹ năng CSS của tôi đã bỏ rơi tôi hôm nay.

đơn giản ví dụ ở đây: http://jsfiddle.net/tvysB/1/

Answer 1

Đặt top và bottom-0, do đó thanh bên là chính xác chiều cao tương tự như chế độ xem:

#leftCol { 
    position: fixed; 
    width: 150px; 
    overflow-y: scroll; 
    top: 0; 
    bottom: 0; 
} 

Dưới đây là fiddle của bạn: http://jsfiddle.net/tvysB/2/

Answer 2

Tôi có cùng sự cố này và đã khắc phục sự cố bằng cách sử dụng:

.WhateverYourNavIs { 
     max-height: calc(100vh - 9rem); 
     overflow-y: auto; 
} 

Điều này đặt chiều cao tối đa cho điều hướng của bạn theo cách đáp ứng với chiều cao của trình duyệt người dùng và sau đó cung cấp cho nó một cuộn khi cần.