div di chuyển chiều cao thay đổi, vị trí tương đối so với chiều cao thay đổi của anh chị em

Question

gần đây tôi hỏi câu hỏi này: overflow (scroll) - 100% container height về cách đạt được div cuộn dọc với chiều cao thay đổi.

người dùng rất hữu ích đã cung cấp giải pháp sử dụng vị trí và chiều cao tuyệt đối: 100%, tại đây: http://jsfiddle.net/TUwej/2/. trong fiddle này, bạn có thể thấy hành vi mong muốn cơ bản - div cuộn sẽ lấp đầy chiều cao của vùng chứa chính như được xác định bởi nội dung trong phần tử '#main'.

tôi sửa đổi phần này và được sử dụng hàng đầu: 0 dưới cùng: 0 thay vì chiều cao: 100% để chứa phần tử phía trên vùng có thể cuộn. phiên bản sửa đổi có thể được thấy ở đây: http://jsfiddle.net/N6muv/3/ (tôi nhận ra có thêm một chút đánh dấu và các định nghĩa lớp trống, và một tổ hợp anh chị em liền kề xuất hiện dư thừa - đây là dấu tích của cấu trúc thực tế)

mọi thứ đều ổn, ngoại trừ việc tôi đã phải cung cấp một tọa độ cố định hàng đầu cho div cuộn (lưu ý phần đầu: khai báo 120px cho bộ chọn '.sidebar-list'). Tôi muốn điều này liên quan đến phần tử '.sidebar-options' phía trên nó, để vùng chứa tùy chọn ở trên có thể có bất kỳ số tùy chọn nào và div cuộn có thể cuộn sẽ tự định vị chính xác. bằng cách sử dụng tọa độ cố định, nếu có bất kỳ tùy chọn nào được thêm hoặc xóa, chồng chéo xảy ra hoặc không gian không cần thiết phát triển - tôi muốn tránh điều này. số tùy chọn chính xác sẽ xuất hiện khác nhau giữa các chế độ xem.

tôi đã nghĩ để quấn div cuộn trong một container tương đối định vị, nhưng làm điều đó tạo ra một cuộc xung đột với đáy: 0 không còn chỉ ra chiều cao của container chính '.wrapper' (mà nó nên làm). tương tự, sử dụng chiều cao: 100% sẽ sử dụng chiều cao tính toán của vùng chứa '.wrapper' để div cuộn có thể cuộn sẽ vượt ra ngoài ranh giới của '.wrapper'.

là có cách nào để giữ chức năng được hiển thị trong câu lệnh thứ hai, nhưng với phần trên cùng của div cuộn có thể cuộn xuống dưới cùng của div tùy chọn (có chiều cao biến đổi) không?

cảm ơn trước vì bất kỳ đề xuất nào.

EDIT: S.O. hỏi nếu tôi muốn bắt đầu một tiền thưởng, vì vậy tôi đã làm (lần đầu tiên) - hy vọng 100 điểm không được coi là quá thấp. vẫn đang tìm kiếm một giải pháp no-script, pure-css không liên quan đến tọa độ cố định hoặc kích thước cho trục y (chiều rộng và các phép gán trái là OK). thx

Answer 1

UPDATE:

nhập JQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

New Demo: http://jsfiddle.net/Mutant_Tractor/N6muv/28/

Thêm thoải mái chút kịch bản JQuery này vào trang của bạn:

var contentColHeight = $('.content').height(); 
var optionColHeight = $('.sidebar-options').height(); 
var newHeight = contentColHeight - optionColHeight; 
$('.sidebar-list').height(newHeight); 

---

OLD

Làm thế nào phù hợp với nhu cầu này của bạn không? http://jsfiddle.net/Mutant_Tractor/N6muv/4/

tôi đã thay đổi position:absolute;-position:relative và thêm một tĩnh height:190px cũng như thêm background:pink; (vì vậy bg luôn có vẻ đúng)

Bạn có thể thử thêm và loại bỏ Options từ danh sách trên để giới thiệu này.

Full mã:

.sidebar-content { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background : pink; 
} 

Answer 2

Tôi tin rằng bạn nên loại bỏ vị trí tuyệt đối trên các yếu tố bên trong và thử overflow: auto.

Answer 3

Bạn cần xác định chiều cao của danh sách thanh bên, bạn phải đặt nội dung này thành độ cao có thể cuộn và tối thiểu hoặc tối đa phải được xác định. Và bạn có thể thiết .sidebar-list{position: relative;} Xem này Fiddle

Sửa bạn .sidebar-content cũng cần được tương đối vị trí Xem này Fiddle bất cứ nội dung 'tùy chọn' của bạn có chứa.