jquery |動態改變div的高度onresize

Question

我的函數有一個問題，它會在發生頁面大小調整時計算每個div部分的高度。它顯示了結果後的相同高度值。但是在第一頁加載時一切正常。問題在哪裏？

JS

$(document).ready(function() { 
    $(window).bind('orientationchange resize', function(e){ 
     resize(); 
    }).trigger('resize'); 
}); 

function resize() { 
    var vph  = $(window).height(); 

    $.each($('.st-panel'), function(index, value) { 
     var section_height = $(this).height() < vph ? vph : $(this).height(); 
     $(this).height(section_height); 
    }); 
} 

HTML

<section class="st-panel" id="st-panel-1">...long text here...</section> 
<section class="st-panel" id="st-panel-2">...long text here...</section> 
<section class="st-panel" id="st-panel-3">...long text here...</section> 
<section class="st-panel" id="st-panel-4">...long text here...</section> 
<section class="st-panel" id="st-panel-5">...long text here...</section> 

Answer 1

我覺得有可能是與你的業務邏輯有問題。當視口大小增加時，您的部分也會增加。之後，當它減少時，部分的高度將總是大於視口大小，這就是爲什麼不調整大小的原因。

我可能是錯的，但你需要指定你想達到什麼樣的目的來理解究竟是什麼被打破。

你可以看看這個的jsfiddle，我addded一些記錄有http://jsfiddle.net/q8sp2jzy/

console.log('Section height: '+ $(this).height()); 
console.log('Viewport: ' + vph); 
var section_height = $(this).height() < vph ? vph : $(this).height(); 
$(this).height(section_height);