Làm thế nào để thiết lập chiều cao của phần tử để phù hợp với chiều cao của một phần tử khác?

Question

Tôi hiện có hai cột, với một cột khác nằm giữa chúng. Những gì tôi muốn là để các cột bên trái và bên phải mở rộng chiều cao vì cột trung tâm có nhiều nội dung được thêm vào nó.

Điều cần lưu ý là tôi không thể đặt chiều cao chính xác cho div gốc và sau đó có cột trái và phải được đặt thành "chiều cao: 100%". Điều này là do có thể chỉ có một lượng nhỏ nội dung trong cột ở giữa hoặc rất nhiều.

Answer 1

Dường như bạn sẽ phải triển khai phương pháp tiếp cận Javascript. Cách tôi sẽ đi về nó sẽ là lấy chiều cao của .legs sau đó áp dụng nó để .flight_no và .price.

Tùy chọn duy nhất khác mà tôi có thể nghĩ là "giả mạo" bằng cách cho .flight hình nền bao gồm các cột trái và phải khác nhau về phong cách, sau đó là repeat-y trong CSS của bạn. Nếu bạn làm điều đó, sidebars sẽ không thực sự phải có cùng chiều cao.

Một cái gì đó như thế này, bằng cách sử dụng jQuery, sẽ tự động thiết lập sidebars của bạn đến chiều cao của cột giữa.

$(document).ready(function() { 
    $(".flight_no, .price").css("height", $(".legs").height()); 
}); 

Answer 2

Mở rộng div để sửa chiều cao, hoặc cho phép nói 100% chiều cao của container, Bạn cần phải chuỗi height:100% lên đến container với chiều cao cố định hoặc cho cơ thể với height: 100%; khác. Về lâu dài, có thể bạn sẽ cần giải pháp này.

Vì không có chiều cao cố định, tôi đã sử dụng height: 100% và chuỗi liên kết đến phần thân html.

body, html { height: 100%; } 
.flight 
{ 
    float: right; 
    border: 1px solid green; 
    height: 100%; 
} 

Demo

để cung cấp cho chiều cao chính xác của container để các sidebars, bạn có phải sử dụng chiều cao cố định hoặc sử dụng javascript.