jquery - パディングを追加しない同じ高さの列

Question

以下のコードを使用して列の高さを等しくしていますが、パディングを計算していないため、テキストがdivから出ています。

<script>
        $(document).ready(function(){
            //set the starting bigestHeight variable
            var biggestHeight = 0;
            //check each of them
            $('.equal').each(function(){
                //if the height of the current element is
                //bigger then the current biggestHeight value
                if($(this).height() > biggestHeight){
                    //update the biggestHeight with the
                    //height of the current elements
                    biggestHeight = $(this).height();
                }
            });
            //when checking for biggestHeight is done set that
            //height to all the elements
            $('.equal').height(biggestHeight);

        });
    </script>

Answer 1

使用してみてください.outerHeight()

http://api.jquery.com/outerHeight/

• .height()=高さ
• .outerHeight()=高さ+パディング+ボーダー
• .outerHeight(true)=高さ+パディング+ボーダー+マージン

要素内に画像がある場合は、を使用して画像が読み込まれるのを待つ必要があります$(window).load()

    $(window).load(function(){ // wait for all content and images are loaded
        var biggestHeight = 0;
        $('.equal').each(function(){
            if($(this).height() > biggestHeight){
                biggestHeight = $(this).height();
            }
        });
        $('.equal').height(biggestHeight);
    });