Đặt chiều cao DIV bằng với một DIV khác

Question

Tôi có hai DIV, .sidebar và .content và tôi muốn đặt .sidebar để giữ cùng chiều cao với .content.

Tôi đã thử những điều sau đây:

$(".sidebar").css({'height':($(".content").height()+'px'}); 

$(".sidebar").height($(".content").height()); 

var highestCol = Math.max($('.sidebar').height(),$('.content').height()); 
$('.sidebar').height(highestCol); 

Không ai trong số những đang làm việc. Đối với các .content Tôi không có bất kỳ chiều cao kể từ khi sẽ tăng hoặc giảm dựa trên nội dung.

Hãy giúp tôi. Tôi phải hoàn thành một trang web ngày hôm nay và điều này (đơn giản) là cho tôi đau đầu.

Cảm ơn bạn!

Answer 1

Tôi nghĩ rằng những gì bạn đang tìm kiếm là faux columns.

Answer 2

Theo kinh nghiệm của tôi, đó là một ý tưởng rất, rất tồi khi sử dụng Javascript cho loại điều này. Web phải là ngữ nghĩa. Nó không phải là luôn luôn, nhưng nó nên. Javascript là dành cho chức năng tương tác. HTML dành cho nội dung. CSS dành cho thiết kế. Bạn CÓ THỂ sử dụng một cho mục đích của người khác, nhưng chỉ vì bạn CÓ THỂ làm điều gì đó không có nghĩa là bạn NÊN.

Đối với vấn đề của bạn cụ thể, câu trả lời ngắn gọn là: bạn không kéo giãn thanh bên. Bạn không phải làm vậy. Bạn thiết lập một nền trông giống như thanh bên của bạn và để nó trông giống như một cột. Đó là, như Victor Welling đặt nó, một cột giả.

Dưới đây là một trong nhiều trang web cho thấy làm thế nào để làm điều đó:

http://www.alistapart.com/articles/fauxcolumns/

Nhưng nghỉ mát nó để Javascript cho rằng loại vấn đề trình bày sẽ là "sai" ngay cả khi nó làm việc.

Answer 3

eje211 có một điểm về cách sử dụng CSS để tạo kiểu cho trang của bạn. Dưới đây là hai phương pháp để sử dụng CSS và một phương pháp sử dụng tập lệnh để thực hiện việc này:

1. Bài viết này có chiều cao cột bằng nhau without CSS hacks.

2. Đây là phương pháp để có được chiều cao cột bằng nhau using a CSS hack.

3. và cuối cùng, nếu bạn muốn sử dụng javascript/jQuery, bạn có thể sử dụng tập lệnh chiều cao cân bằng mà trang jQuery .map() làm bản trình diễn.

   $.fn.equalizeHeights = function(){ 
       return this.height(Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get())) 
   } 
   

   sau đó chỉ cần sử dụng nó như sau:

   $('.sidebar, .content').equalizeHeights(); 
   

Answer 4

Lý do ví dụ đầu tiên của bạn không hoạt động là do một lỗi đánh máy:

$(".sidebar").css({'height':($(".content").height()+'px'}); 

nên thực sự là

$(".sidebar").css({'height':($(".content").height()+'px')}); 

bạn đang thiếu dấu ngoặc đơn từ trước bộ chọn .content.

Answer 5

Tôi đã sử dụng kỹ thuật này để buộc phần tử chân trang vẫn ở cuối trang dựa trên chiều cao của phần tử khác. Trong trường hợp của bạn, bạn sẽ; nhận thanh bên và nội dung div để giữ cùng chiều cao có thể làm như sau.

1. Lấy chiều cao của div chính; Tôi đoán đó là div .content; và gán nó cho một biến.

   var setHeight = $(".content").height();

2. sau đó bạn có thể sử dụng jQuery để có được thanh bên và gán chiều cao nội dung bằng cách sử dụng biến.

   $(".sidebar").height(setHeight);

Nó là đơn giản như vậy. Mã cuối cùng sẽ trông như thế này.

`var setHeight = $(".content").height();` 
`$(".sidebar").height(setHeight);` 

Here are more examples. Đặt chiều cao div bằng jquery (chiều cao div kéo dài).

Answer 6

trình như một say mê:

function sidebarHandler() { 
    jQuery(".sidebar").css({'height':(jQuery(".content").height()+'px')}); 
    jQuery(".sidebar").height(jQuery(".content").height()); 
    var highestCol = Math.max(jQuery('.sidebar').height(),jQuery('.content').height()); 
    jQuery('.sidebar').height(highestCol); 
} 

khởi tạo nó với tất cả những thứ khác jQuery của bạn:

jQuery(document).ready(function() { 
    sidebarHandler(); 
}); 

Answer 7

$(window).resize(function(){ 
 
    var height = $('.child').height(); 
 
    $('.parent').height(height); 
 
}) 
 

 
$(window).resize(); //on page load

.parent{ 
 
    background:#ccc; 
 
    display:inline-block; 
 
    width:100%; 
 
    min-height:100px; 
 
} 
 
.child{ 
 
    background:red; 
 
    width:50%; 
 
    position:absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="child"> 
 
    hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute <br>hellow i am floating as absolute 
 
    </div> 
 
</div>