如何在div内获得3 p标签的总高度？

Question

这是我的代码

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

我的入门内容div具有绝对定位，因此p标签内的文本位于页脚下方。我必须使用javascript将入口内容的高度修复为所有p标签的总高度。 请帮忙。

Answer 1

使用outerHeight（获取匹配元素集合中第一个元素的当前计算高度，包括填充，边框和可选边距。）

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

Answer 2

尝试这样...... Working Demo

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

Answer 3

您是否尝试过使用$('.entry-content').height()或.innerHeight()等类似功能？ （jQuery docs）。

您无需设置<div>的高度，但可以测量默认高度，并使用它来定位页脚。

警告语：由于文本换行，调整窗口大小时该div的高度可能会发生变化。您可能希望使用$(window).resize(...)设置回调，以便在发生这种情况时更新定位。

Answer 4

jsBin demo

使用：outerHeight(true)

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

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

Answer 5

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

或许这样的事情 这取决于jQuery

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()。