javascript - jQuery 比较高度未在高度减小时运行

Question

我有以下 jQuery 片段检查左侧和右侧列的高度。如果警报列表(左)的高度增加，侧边栏行的高度也会增加以匹配。然而，一旦这个增加，并且警报列表减少(通过选择不同的区域或较少数量的警报)，侧边栏和包含所有内容的整个行的高度不会减少，从而在下面留下巨大的空间。

要重现问题:
选择ST HELENS地区。
选择 100 个提醒
现在选择WIRRAL区域。
容纳高度不减少。

http://178.62.45.247/areas.php

*注意，这必须在 IE7 及更高版本上运行*

function areasRowHeight() {
    $height1 = $('.nopr').height();
    $height2 = $('.nopl').height();
    if($height1 > $height2) {
        $('.areasrow').height($height1);
    }
    else {
        $('.areasrow').height($height2);
    }
}

$(document).ready(function(){     
    $( window ).resize(function() { 
        maxHeight('.nopr', '.nopl');
    });
    $( window).scroll(function(){
        maxHeight('.nopr', '.nopl');
    });
    $( window ).on( "orientationchange", function( event ) {
        maxHeight('.nopr', '.nopl');
    });
    $('.burgermenu').on('click', function(event){
        $(this).css('display', 'none');
        $('.cancel').css('display', 'inline-block');
        $('.smnav').css('display', 'block');
        // $('.burgermenu').attr('class', 'burgermenu-open')         
        event.preventDefault();
    });
    $('.cancel').on('click', function(event){
        $(this).css('display', 'none');
        $('.burgermenu').css('display', 'inline-block');
        $('.smnav').css('display', 'none');
        // $('.burgermenu').attr('class', 'burgermenu-open')         
        event.preventDefault();
    });

    $('.show5').on('click', function(event){
        hide('.latestalerts ul', 5);
        maxHeight('.nopr', '.nopl');
        $('.areasrow').height('auto');
        event.preventDefault();

    });

    $('.show10').on('click', function(event){
        hide('.latestalerts ul', 10);
         maxHeight('.nopr', '.nopl');
        $('.areasrow').height('auto');
        event.preventDefault();

    });
    $('.show100').on('click', function(event){
        hide('.latestalerts ul', 50);
         maxHeight('.nopr', '.nopl');
        $('.areasrow').height('auto');
        event.preventDefault();

    });
    $('.showall').on('click', function(event){
        resetHide();
         maxHeight('.nopr', '.nopl');
        $('.areasrow').height('auto');
        event.preventDefault();

    });        

    var trigger = $('.button li a'),
    container = $('.latestalerts');      
    trigger.on('click', function(event){
    windowAnchor();
    event.preventDefault();       
      var $this = $(this),
      target = $this.data('target');
      $('#content').load('controllers/areaload/' + target + '.php');   
        areasRowHeight();
    });

    maxHeight('.nopr', '.nopl');

});

Answer 1

我没有 IE7，但如果我理解正确的话，你应该从 style.css

中删除

.areasrow .nopr {
    height: 100% !important;
}
.areasrow .nopl {
    height: 100% !important;
}

.areasrow .nopr .inner-content {
    height: 100% !important;
}

.areasrow .nopl .sidebarbg {
    height: 100%;
}

然后在main.js中进行更改

$('#content').load('controllers/areaload/' + target + '.php');
areasRowHeight();

至

$('#content').load('controllers/areaload/' + target + '.php', function(){
  maxHeight('.nopr', '.nopl');
});

有点脏，但是对于这个文档结构，这就是我所能建议的。