0

したがって、この関数の onLoad 部分はうまく機能しますが、ウィンドウのサイズを変更しても高さが調整されません。onLoad だけでは、ウィンドウのサイズを変更して div の高さを均等にするたびにページを更新する必要がありますが、.resize が機能しない理由はわかりません。

私は間違いを犯していますか？

//equalize funciton
function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

<script type="text/javascript"> 
$(window).load(function() { 
    equalHeight($("#div_right, #div_left, #div_bottom, .border")); 
}); 
</script>
<script type="text/javascript"> 
$(window).resize(function() { 
    equalHeight($("#div_right, #div_left, #div_bottom, .border")); 
});

$(document).ready(function() { 
    equalHeight($("#div_right, #div_left, #div_bottom, .border")); 
}); 
</script>
4

3 に答える 3

1 
//equalize funciton
function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).css({'height':'auto'}).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

$(window).on('load resize',function() { 
    equalHeight($("#div_right, #div_left, #div_bottom, .border")); 
});

//'on' 関数には jQuery 1.7 が必要だと思います。

exampleFIDDLE : http://jsfiddle.net/sabithpocker/xgYBZ/

于 2012-06-17T05:39:23.283 に答える
0

スクリプトを介してインライン css を使用して高さを設定すると、サイズ変更前、サイズ変更中、サイズ変更後にすべて同じ固定高さになります...ページの読み込み時に設定された値と同じです。その高さはまだインラインです！

removeAttr('style')他のインライン css が存在しない場合に使用するか、それぞれの内容を別の要素でラップし、内側のラップの高さを確認して、その値を使用して主要な要素を設定する必要があります。

編集：インナーをラップし、それらを使用して高さをテストするこのバージョンを試してください

//equalize funciton
function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).find('.inner_wrap').height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
$(document).ready(function() { 
    var $group=$("#div_right, #div_left, #div_bottom, .border")
    $group.wrapInner('<div class="inner_wrap">');   
    equalHeight($group); 
});

編集:グループ内のさまざまなクラスでパディングが異なる場合、落とし穴があります。この場合、css を変更してパディングが外側ではなく内側になるようにするか、関数に追加の計算を追加する必要があります。

于 2012-06-17T04:54:18.980 に答える
-1

上記のすべての JavaScript を次のものに置き換えます。

<!-- Include jQuery somewhere up here -->
<script type="text/javascript">
  // Equalize function
  function equalHeight(group) {
    tallest = 0;
    group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) { tallest = thisHeight; }
    });
    group.height(tallest);
  }

  (function($){

    $(window).resize(function() { 
      equalHeight($("#div_right, #div_left, #div_bottom, .border")); 
    }).resize();

  })(jQuery);
</script>

それはトリックを行いますか？

于 2012-06-17T04:47:26.877 に答える