0

作業中のサイトのレスポンシブカレンダーを作成中です。次のJavaScriptを使用してカレンダーを細かく縮小し、divを同じ高さに設定します。

    $(function(){
    var equalHeight = function() {
        $(".calBody").each(function(){
            var maxHeight = 0;
            $(this).children(".calBlock")
                .each(function() { maxHeight = Math.max(maxHeight, $(this).height()); })
                .css('min-height',maxHeight);
        });
    }

    equalHeight();

    $(window).resize(function(){equalHeight()});
});

これにより、列が最初から縮小されてもきれいに保たれますが、縮小を開始すると、divの最大の高さが最も高いときから維持されます。

それらをスケールアップして、最も高いdivをスケールアップおよびスケールダウンするために必要なものと同じだけの高さにするためのアイデアはありますか？

これが実際のjsfiddleです：jsfiddle.net/7n4VH/1

4

1 に答える 1

1

代わりに、.calBlockの子の.height（）を取得してみてください。何かのようなもの：

.each(function() { maxHeight = Math.max(maxHeight, $(this).children('.events:first').height()); })
.css('min-height',maxHeight+30);
于 2012-04-24T15:48:39.210 に答える