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

我认为您的业务逻辑可能存在问题。增加视口大小时，您的部分也会增加。之后当它减少时，部分＆＃39;高度总是大于视口大小，这就是为什么没有调整大小的原因。

我可能错了，但你需要指明你想要达到的目的，以了解到底究竟是什么。

你可以看看这个jsfiddle，我在那里添加了一些日志记录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);

jquery |动态改变div的高度onresize

1 个答案: