javascript - div内の3つのpタグの合計の高さを取得するには?

Question

ここに私のコードがあります

<div class="entry-content"> <p>some text...</p> <p>some text...</p> <p>some text...</p> </div>

私の entry-content div には絶対配置があるため、p タグ内のテキストはフッターの下に入ります。javascript を使用して、entry-content の高さをすべての p タグの合計の高さに修正する必要があります。助けてください。

Answer 1

outerHeightを使用します (パディング、ボーダー、およびオプションでマージンを含む、一致した要素のセットの最初の要素の現在の計算された高さを取得します。)

var total = 0;
$('.entry-content').find('p').each(function() {
  total += $(this).outerHeight(true);
});
$('.entry-content').height(total);

Answer 2

このようにしてみてください...動作デモ

var height = 0;
$('div.entry-content p').each(function() {
    height += parseInt($(this).outerHeight(true));
});

Answer 3

jsBinデモ

使用する：outerHeight(true)

var entryHeight = $('.entry-content').outerHeight(true);

$('#footer').height(entryHeight);

Answer 4

$(function(){
var totaltHeight; 
  $('.entry-content p').each(function(){
    totaltHeight = totaltHeight +$(this).height();
  });
});

おそらくこれはjQueryに依存しているようなものです

Answer 5

$('.entry-content').height()、または同様の機能を使用してみました.innerHeight()か? ( jQuery ドキュメント)。

の高さを設定する必要はありませんが<div>、デフォルトの高さを測定し、それを使用してフッターを配置できます。

警告の言葉: テキストの折り返しのため、ウィンドウのサイズが変更されると、その div の高さが変わる可能性があります。を使用してコールバックを設定し、$(window).resize(...)それが発生したときに位置を更新することができます。

Answer 6

少し前に、次のような問題に役立つ小さな jQuery プラグインを作成しました。

プラグイン

(function ($) {
    // helper 'plugin' for getting the total height
    $.fn.totalHeight = function ()
    {
        var totalHeight = 0;
        this.each(function () {
            totalHeight += $(this).height();
        });

        return totalHeight;
    }
})(jQuery);

使用法

var totalHeight = $('.entry-content p').totalHeight();

outerHeight()編集:これは、またはのサポートに簡単に適用できますinnerHeight()。