Làm thế nào để thay đổi chiều cao div trên cửa sổ thay đổi kích cỡ?

Question

Tôi có một div trên trang web của tôi nên là chiều cao của cửa sổ. Đây là những gì tôi nhận được:

$(document).ready(function() { 
    var bodyheight = $(document).height(); 
    $("#sidebar").height(bodyheight); 
}); 

Tuy nhiên, nó không tự động thay đổi khi cửa sổ được thay đổi kích cỡ? Có cơ thể nào biết cách sửa lỗi này không?

Cảm ơn

Answer 1

Bạn cũng cần phải làm điều đó trong resize sự kiện, hãy thử này:

$(document).ready(function() { 
    $(window).resize(function() { 
     var bodyheight = $(this).height(); 
     $("#sidebar").height(bodyheight); 
    }).resize(); 
}); 

Answer 2

Sử dụng các sự kiện resize.

này nên làm việc:

$(document).ready(function() { 
    $(window).resize(function() { 
    var bodyheight = $(document).height(); 
    $("#sidebar").height(bodyheight); 
}); }); 

Answer 3

Bên cạnh đó với những gì người khác đã nói chắc chắn rằng bạn trích xuất mã xử lý sự kiện vào một chức năng riêng biệt và gọi nó là từ ready và resize xử lý sự kiện. Bằng cách đó, nếu bạn thêm một số mã hoặc cần phải liên kết nó với các sự kiện khác, bạn sẽ chỉ có một nơi để thay đổi mã logic.

Answer 4

Một số làm rõ về điều này, để cửa sổ thay đổi kích thước chính xác sau mỗi lần gọi lại, bạn phải làm rõ chiều cao cần lấy.

$(document).ready(function() { 
     $(window).resize(function() { 
      var bodyheight = $(window).height(); 
      $("#sidebar").height(bodyheight); 
     }); 
    }); 

Nếu không, từ kinh nghiệm của tôi, chiều cao sẽ tiếp tục tăng ngay bây giờ là cách bạn đổi kích thước cửa sổ. Điều này sẽ lấy chiều cao của cửa sổ hiện tại.

Answer 5

Chỉ cần để hiển thị các DRY-up gợi ý trong các bình luận về câu trả lời được chấp nhận:

$(document).ready(function() { 
    body_sizer(); 
    $(window).resize(body_sizer); 
}); 
function body_sizer() { 
    var bodyheight = $(window).height(); 
    $("#sidebar").height(bodyheight); 
} 

Và dĩ nhiên đây là loại ngớ ngẩn vì nó là một cái gì đó mà có thể được thực hiện với CSS đơn giản hơn. Nhưng nếu có một phép tính liên quan thì đó sẽ là một câu chuyện khác. Ví dụ này làm cho một div điền vào dưới cùng của cửa sổ, trừ đi một fudgefactor nhỏ.

$(function(){ 
    resize_main_pane(); 
    $(window).resize(resize_main_pane); 
}); 
function resize_main_pane() { 
    var offset = $('#main_scroller').offset(), 
    remaining_height = parseInt($(window).height() - offset.top - 50); 
    $('#main_scroller').height(remaining_height); 
} 

Answer 6

$(document).ready(function() 
{ 

    $(window).on("resize",function() { 

      var bodyheight = $(document).height(); 

      $("#sidebar").height(bodyheight); 
    }); 

});