jQuery获取容器中内容的高度答案

【问题标题】：jQuery get height of the contents in a containerjQuery获取容器中内容的高度
【发布时间】：2016-01-27 15:01:36
【问题描述】：

我什至不确定这是否可行，但我想获取容器中内容的高度。假设我有

<div id="container" style="min-height:100vh">
    <div class="child">
      <p>Some text here</p>
    </div>
    <div class="another-child">
      <p>Some text here</p>
    </div>
</div>

如何获取#container内容的真实高度？这些内联高度只是显示父高度可以是任何东西的示例。我想知道内容真正占据了多少。再次假设可能有任意数量的子标签。

注意在上面的例子中，真正的高度是这些段落组合的高度，如果它们不是内联的话。

【问题讨论】：

您甚至在网上搜索过解决方案吗？
所以你并不是说你想知道它的 100% 高度。或者说你的浏览器窗口是 800 像素高，它告诉你 800 像素，而是告诉你下面的两条线使用了多少像素，即使你在容器上设置了不同的高度？
我当然搜索过网络。我已经找了2天了！如果您不理解问题，则无需投票
不，我不关心将 % 转换为 px！我想知道较大父项中内容的高度（不是父项的高度，而是内容组合的高度）。

标签： javascript jquery html css jquery-ui

【解决方案1】：

不确定这是否可以使用单个 jQuery/javascript 函数来完成。但是这个sn-p可能很有用

HTML

 // Added a common class to all child element of div#container
     <div id="container" style="min-height:100vh">
        <div class="child cc">
          <p>Some </br>text here</p>
        </div>
        <div class="another-child cc">
          <p>Some text here</p>
        </div>
    </div>

JS

// Loop through all child element using common class to get the total height
var cc = 0;
    $("#container > div.cc").each(function(){
        cc += $(this).outerHeight();
    });
$('#height').append('<p>'+ cc+'</p>' );

CSS

 p{
    margin:0px;
        }

Look here如果你想知道为什么设置margin:0

JSFIDDLE

编辑

添加一个迭代器以排除inline 元素。 .each 也在迭代具有 cc 类的元素。所以你可以让inline 没有cc 类。

这是在添加元素高度之前检查元素的 display 类型的 sn-p。

var cc = 0;
    $("#container > .cc").each(function(){
      var getDisplay = $(this).attr('dipslay') // Check the display attribute
       // Using ternary operator 
       getDisplay !=='inline'? (cc += $(this).outerHeight()) :0;
     });

UPDATED FIDDLE

【讨论】：

但是如果孩子是内联的呢？这只适用于块显示的项目正确吗？
仍然是一个有缺陷的答案。因内联块、包装内联子项、浮动子项等而损坏。我想真正的解决方案是用.getBoundingClientRect() 减去所有子边缘上的最小和最大 y 坐标。但我想知道这是否必须与positioning coordinate variations 抗衡。

【解决方案2】：

尝试使用window.getComputedStyle(/* DOM element */).getPropertyValue("height")

console.log(window.getComputedStyle($("#container")[0]).getPropertyValue("height"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="container" style="min-height:100vh">
  <div class="child" style="height:100%">
    <div class="another-child">
      <p>Some text here</p>
    </div>
    <div class="another-child">
      <p>Some text here</p>
    </div>
  </div>
</div>

【讨论】：

只是一个小小的疑问，为什么它是 200px，但是当你使用 chroome dev 的工具将鼠标悬停在 DOM 上时，你可能会看到 div.child 的高度是 68px 并且 div#container 的高度等于屏幕的高度?

【解决方案3】：

你可以使用jQuery的.height()-functions：

$('#container').height();

获取匹配元素集中第一个元素的当前计算高度

或者

$('#container').innerHeight();

获取匹配元素集中第一个元素的当前计算内部高度（包括填充但不包括边框）

或者

$('#container').outerHeight();

获取匹配元素集中第一个元素的当前计算高度，包括填充、边框和可选的边距

Demo

【讨论】：

【解决方案4】：

使用 jQuery 方法 $("selector").height(); 这将返回您的容器占用了多少。

【讨论】：

容器中的内容

【解决方案5】：

                  var cc = 0;
                  $("#"+currenId2c+ "> .cc").each(function(){
                  var getDisplay = $(this).attr('dipslay')
                      getDisplay !=='inline'? (cc += $(this).outerHeight()) :0;
                  });
                  var cnt = cc;
                  console.log(cnt);

【讨论】：