"Mọi thứ còn lại" trong bố cục CSS

Question

Tôi có 4 phần tử bên trong phần tử vùng chứa. Phần tử vùng chứa sẽ có chiều cao được đặt là 100% của cửa sổ trình duyệt. 4 yếu tố bên trong sẽ xuất hiện theo chiều dọc xếp chồng lên nhau (như bình thường). Hai phần tử đầu tiên và phần tử cuối cùng phải có chiều cao "tự nhiên" (nghĩa là: đủ để phù hợp với nội dung của chúng). Phần tử thứ 3 sẽ mở rộng để lấp đầy không gian có sẵn trong vùng chứa, sau khi 3 phần còn lại ăn tất cả những gì họ cần.

Vì vậy, nó sẽ giống như thế này:

tôi không thể thiết lập chiều cao rõ ràng cho Element-1, Element-2, hoặc Element-4, tôi cũng không biết chiều cao của container . Tôi cũng không biết chiều cao tự nhiên của Element-3; Tôi dự định sử dụng overflow-scroll nếu dung lượng lớn hơn thì có sẵn. Tôi đã thêm khoảng cách giữa các phần tử để minh hoạ, nhưng sẽ có khoảng trắng (lề/đệm) giữa các phần tử thực.

Làm thế nào để bạn đạt được điều này bằng HTML/CSS? Nếu thỏa hiệp phải được thực hiện để có được một bố trí phong nha, tôi sẽ xem xét chúng. Điểm thưởng nếu kỹ thuật này cũng áp dụng theo chiều ngang (mà tôi đã cần trong dịp).

Answer 1

Trước hết, hình ảnh tuyệt vời.

Thứ hai .. một giải pháp javascript có nằm ngoài câu hỏi không?

Cập nhật

này được chỉ định trở thành một mẫu, nhưng tôi đã cập nhật mã để xoa dịu một số người kén chọn hơn ngoài kia.

http://jsfiddle.net/tsZAV/9/

Answer 2

Có một số điều khiến cho điều này không thể thực hiện được trong css thuần túy.

1. Cửa sổ trình duyệt có thể ngắn hơn chiều cao động của 3 yếu tố đầu tiên.
2. Không có cách nào để buộc yếu tố chiếm phần còn lại của chiều cao của vùng chứa.
3. CSS là ngôn ngữ tạo kiểu tài liệu chứ không phải ngôn ngữ lập trình. Hãy nghĩ viết CSS như một tập hợp các nguyên tắc mà trang nên cố gắng làm theo, chứ không phải là cách thiết lập kích thước rõ ràng (mặc dù bạn có thể đặt kích thước rõ ràng).

Điều này tương đối đơn giản với JavaScript thay đổi kích thước phần tử thứ tư. Bạn sẽ phải lắng nghe sự kiện resize để yếu tố thứ tư được định kích thước phù hợp. Ngoài ra, bạn sẽ muốn đặt giá trị min-height cho phần tử-4, trong trường hợp không có đủ không gian cho phần tử thứ tư.