Làm thế nào để thiết lập chiều cao 'div' giống với người hàng xóm của mình?

Question

Tôi đang sử dụng bootstrap làm khung CSS của mình. Bây giờ tôi có một số nội dung động trong div bên trái và một số nội dung tĩnh trong div bên phải. Tôi muốn chiều cao của div bên phải thay đổi tự động căn cứ vào chiều cao của div bên trái. Điều đó có thể không?

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span5 offset1"> 
    <div class="well"> 
     Dynamic Content 
    </div> 
    </div> 
    <div class="span5"> 
    <div class="well" style="height: 330px; overflow-x: hidden; overflow-y: scroll;"> 
     Static Content 
    </div> 
    </div> 
</div> 

Answer 1

Tôi nghĩ jQuery là giải pháp tốt nhất để đạt được điều này. Kiểm tra fiddle tôi:

http://jsfiddle.net/PHjtJ/

$(document).ready(function() { 

    var dynamic = $('.dynamic'); 
    var static = $('.static'); 

    static.height(dynamic.height()); 

}); 

Answer 2

Bạn có thể làm this

<div class="wrapper"> 
    <div class="dynamic"> 
     Dynamic Line <br /> 
     Dynamic Line <br />  
     Dynamic Line <br /> 
     Dynamic Line <br />  
     Dynamic Line <br /> 
     Dynamic Line <br />  
     Dynamic Line <br /> 
     Dynamic Line <br />  
    </div> 
    <div class="static"> 
     Static<br /> 
     Static<br />   
    </div> 
</div> 

CSS

.wrapper { 
    position: relative; 
    width: 400px; 
    overflow: auto; 
} 

.dynamic { 
    position: relative; 
    background-color: yellow; 
    width: 200px; 
} 

.static { 
    position: absolute;  
    background-color: orange; 
    width: 200px; 
    float: left; 
    left: 200px; 
    top: 0px; 
    bottom: 0px; 
    right: 0px; 
} 

Answer 3

giải pháp phụ thuộc vào những gì bạn muốn trong trường hợp cột static lớn hơn dynamic một. [Tôi thực sự nghĩ bạn muốn kịch bản thứ hai.]

Lưu ý: cả hai trường hợp đều là CSS tinh khiết và không chỉ định bất kỳ chiều cao nào. cũng có, không chỉ định một lề của bất kỳ loại, vì vậy bạn có thể thay đổi độ rộng của cột theo ý muốn của bạn, mà không cần phải tính toán biên độ/vị trí một lần nữa và một lần nữa ..

1. nếu bạn muốn năng động cột để phóng to và phải là chiều cao tĩnh: vì vậy bạn thực sự muốn các cột luôn có cùng độ cao. và có thể dễ dàng đạt được với kiểu bố cục bảng CSS. trong trường hợp đó: Xem Fiddle (tập lệnh này chỉ để thêm nội dung động, đây là một giải pháp CSS thuần túy)

2. nếu bạn muốn cột động chỉ kéo dài đến chiều cao nội dung và cột tĩnh cùng chiều cao + một cuộn. trong trường hợp đó: xem này Fiddle (một lần nữa: kịch bản chỉ là để thêm nội dung động, đây là một CSS SOLUTION tinh khiết)

trong cả hai trường hợp, cột tĩnh phát triển nếu một động trở nên dài hơn.

Answer 4

Sử dụng Javascript/jQuery để tìm mà hộp có chiều cao lớn nhất. Sau đó đặt cùng chiều cao cho tất cả các div.

<script type="text/javascript"> 

jQuery(document).ready(function($) { 
var description = jQuery("div.description"); 
var big =0; 
description.each(function(index, el) { 
    if(jQuery(el).height() > big) 
    big =jQuery(el).height(); //find the largest height 
}); 
description.each(function(index, el) { 
    jQuery(el).css("min-height", big+"px"); //assign largest height to all the divs 
}); 
}); 
</script>