Kéo div lồng nhau lên chiều cao của div vùng chứa khi vùng chứa có chiều cao: tự động?

Question

Tôi có một div vùng chứa và hai div lồng nhau bên trong. Tôi không có quyền kiểm soát nội dung của một trong các div lồng nhau này.

Điều tôi thực sự cần là làm cho hai div lồng nhau luôn có cùng chiều cao. Tôi cho rằng điều này có thể đạt được bằng cách cho chiều cao div container: auto để nó có thể kéo chiều cao của nó lên cao nhất của hai div lồng nhau (mỗi phần kéo dài để vừa với nội dung của nó), và sau đó div lồng nhau khác sẽ kéo dài đến 100% chiều cao của container.

Đây là những gì tôi đã cố gắng:

Kiểu:

#container{ 
    background-color:#FF0; 
    overflow:auto; 
} 

#left{ 
    float:left; 
    height:100%; 
    width:20%; 
    background-color:#F00; 
} 

#right{ 
    height:100%; 
    width:60%; 
    background-color:#0F3; 
} 

HTML:

<div id="container"> 

<div id="left"> 
    <p>Content</p> 
    <p>Content</p> 
    <p>Content</p> 
</div> 

<div id="right"> 
    <p>Content</p> 
    <p>Content</p> 
</div> 

</div> 

Nhưng điều này không làm việc. Các container trải dài để phù hợp với div dài nhất ("trái" trong trường hợp này) nhưng div lồng nhau ngắn hơn ("bên phải") không căng ra chính nó.

Lưu ý, tuy nhiên, điều này không làm việc nếu tôi cung cấp cho các thùng chứa một chiều cao cụ thể:

#container{ 
    background-color:#FF0; 
    overflow:auto; 
    height:300px; 
} 

Có cách nào tôi có thể có được điều này để làm việc mà không cần đến bảng?

Answer 1

Lưu ý quan trọng là giá trị phần trăm cho chiều cao không được chấp nhận một thời gian trước đây. Vì vậy, bạn phải sử dụng một mẫu khác.

Hầu hết thời gian (đặc biệt trong trường hợp của bạn) chiều cao của bảng được đặt tự động. Vì vậy, tốt hơn là tăng chiều cao bằng một chút javascript

<script> 
    function IncreaseHeight() 
    { 
     var first = Document.getElementById("Right").style.height; 
     var second = Document.getElementById("Left").style.height; 

     if(first < second) 
     Document.getElementById("Right").style.height = Document.getElementById("Left").style.height; 
     else 
     Document.getElementById("Left").style.height = Document.getElementById("Right").style.height; 
    } 
</script> 

lưu ý rằng thay đổi địa điểm phải và trái trong trường hợp của bạn.

Answer 2

Hai cách phổ biến nhất để thực hiện việc này là Faux Columns sử dụng hình ảnh hoặc đặt chiều cao bằng các giá trị bằng nhau với JavaScript. Tôi đã thực hiện một screencast để chứng minh kỹ thuật thứ hai, Equalizing Column Heights with jQuery. Kỹ thuật này có thể dễ dàng điều chỉnh cho các thư viện khác hoặc cho JavaScript đơn giản.