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

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

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

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

Answer 4

jsBin 演示

采用：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().