4

しばらく前に非常に基本的な等高関数を作成しましたが、これはうまく機能します。ただし、ウィンドウのサイズが変更されると、列の高さも変更されるようにする必要があります。レスポンシブで流動的なデザインに実装されています。しかし、一般的なレスポンシブ ユース ケースでは、特定のブレーク ポイントを受け入れるためにブラウザーをあちこちにドラッグするわけではないことを、権力者は理解していません。

とにかく、jsfiddle here でマークアップと js のセットアップを取得しました。http://jsfiddle.net/J6uaH/3/

ウィンドウのサイズ変更要素を高さに追加することに頭を悩ませることはできません。誰もが提供できるヘルプは非常に高く評価され、スーパーヒーローのボーナスポイントがあれば誰にでも与えることができます!

4

5 に答える 5

12

要素の高さを再計算するウィンドウのサイズ変更イベントにイベント リスナーを追加しないのはなぜですか?

ただし、要素には既に固定の高さを設定しているため、両方の要素の高さを再設定して新しい最大サイズを取得する必要があります。

追加してみてください：

$(window).resize(function(){
    $('.group .module').css('height','auto');
    $('.group .module').equalHeight();
});

ファイアフォックスで動作します。ウィンドウのサイズ変更ごとにこれが基本的に何をするか：

  1. 要素の高さをリセットします。つまり、ブラウザーはコンテンツに基づいて高さを計算します。
  2. 関数を再度実行して、両方の要素を同じ高さにします
于 2012-10-15T20:25:56.557 に答える
3

私は自分でこれをしなければなりませんでした。私は過去にsetEqualHeight関数を使用しましたが、誰かが狂ったようにウィンドウのサイズを変更しているときに機能させるように「要求」されました。

room13 の修正が鍵です。それ以外の場合は、古いセットの高さを使用するだけです。明らかに、DOM Ready でも同じ関数を呼び出します。ウィンドウのサイズ変更に遅延関数を追加するので、常にではなく、完了したときにのみ呼び出します。

jQuery:

function setEqualHeight(columns) {
    var tallestcolumn = 0;
    columns.each(
    function() {
        currentHeight = $(this).height();
        if(currentHeight > tallestcolumn) {
            tallestcolumn  = currentHeight;
            }
        }
    );
 columns.height(tallestcolumn);
}

var delay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
    };
})();

$(window).resize(function() {
    delay(function(){
        $('.yourSelector').css('height','auto'); //solve for all you browser stretchers out there!
        setEqualHeight($('.yourSelector'));
    }, 500);
});
于 2013-01-30T21:45:01.713 に答える
3

個人的には、JavaScript にまったく頼らずにこの問題を解決したいと思います。HTML をもう少し追加したい場合は、CSS だけで目的の視覚効果を実現できます。

ここに JSFiddle があります: http://jsfiddle.net/Z59eT/2/

基本戦略:

  1. clear:bothモジュールの最後にwith 要素を追加しgroupます --- これにより、グループの高さを 2 つのモジュールの大きい方に等しくすることができます。
  2. グループとモジュールの divを指定position:relativeして、ポジショニングに参加できるようにします。
  3. 各モジュールの前に特別な背景要素を追加します --- これらの要素はグループのサイズに合わせて垂直方向に成長し、目的の列の色を実装します。

この問題を解決する純粋な CSS の方法が他にもあると確信しています。これは最初に頭に浮かんだことです。あなたの本当の要件は、より微妙な何かを要求するかもしれません.

可能な限り、ブラウザに作業を任せたほうがよいでしょう。この場合、ブラウザのネイティブ機能は解釈された JS コードよりも桁違いに高速に実行されるため、高さを計算するよりも、可能であればブラウザに処理させる方が適切です。

于 2012-10-15T20:45:43.567 に答える
1

問題は、高さを大きくしてからボックスに適用していることです。ただし、もう一度比較すると、元のボックスが再び比較されますが、変更されたのは段落の高さです。 

$.fn.equalHeight = function() {
    var maxHeight = 0;
    return this.each(function(index, box) {
        var boxHeight = $(box).height();
        maxHeight = Math.max(maxHeight, boxHeight);
    }).parent().height(maxHeight);
};

$(document).ready(function() {
    $('.group .module p').equalHeight();

    $(window).resize(function () {
        $('.group .module p').equalHeight();
    });

});
于 2012-10-15T20:22:50.167 に答える
-2

これがまさにテーブルが行うことであることに注意する価値があります。例： http： //jsfiddle.net/Z59eT/3/

1行と2つの50％列を持つテーブルは、仕様の要求どおりに大きくなります。

于 2012-10-15T20:49:00.783 に答える