使用 jquery 计算包含另一个有边距的元素的高度答案

【问题标题】：Using jquery to calculate height of an element that contains another with a margin使用 jquery 计算包含另一个有边距的元素的高度
【发布时间】：2016-12-22 02:37:35
【问题描述】：

我必须计算一个 div 的大小。 Jquery 有一个方便的函数，它是outerHeight()。这给了你元素的大小，如果你想包括边距，你打电话给outerHeight(true)。

但是。如果内部元素有边距，则外部元素的大小不会改变。即使内部的仍然被认为是完全在内部。 Here's an example of what I mean.

外层div的outerHeight为18，内层div的outerHeight为218，即文本的18，以及两个100px的边距。

我无法跟踪最终 div 中的所有内容。如何测量它的实际高度，包括其中包含的内容的边距？

【问题讨论】：

使用内边距代替边距 ;) jsfiddle.net/h8uvyx1w/1
我很想，但我无法选择。

标签： javascript jquery html css

【解决方案1】：

这是一个有点hacky的方式，但你可以添加

#container {
    border: 1px solid transparent;
}

这将强制容器获得正确的高度。

document.write('container height= ' + $("#container").outerHeight(true) + '<br>');
document.write('stuff height= ' + $("#stuff").outerHeight(true));

#stuff {
  margin: 100px;
}
#container {
  border: 1px solid transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <p id="stuff">
    lorem ipsum and so on
  </p>
</div>

【讨论】：

太棒了。这实际上有效。我仍然不知道为什么 outerHeight 不会在不添加透明边框的情况下计算整个高度，但非常感谢。

【解决方案2】：

我会认为您的 css 是一种不好的做法并进行更改。例如。您可以包装内部 div 并为包装器提供填充而不是边距。

HTML

<div id="container">
  <div id="wrapper">
    <p id="stuff">
      lorem ipsum and so on
    </p>
  </div>
</div>

CSS

#wrapper {
  padding: 100px;
}
#stuff {
  margin: 0;
}

我更新了您的示例：https://jsfiddle.net/h8uvyx1w/2/

或者你可能不需要包装器，如果你可以根据你的需要将内部 div 边距更改为填充。

【讨论】：

哦，拜托。我考虑回答一个没有被问到不好的问题的问题。不，我无法改变这一点。我仍然需要计算一个 div 的高度，其中包含我可能不一定能够控制或无法预测的内容。
您没有在问题中说明这一点，所以我只知道您无法更改 div 内的内容，因此将其包装在另一个 div 中是一个有效的选择。此外，我并没有说它是不好的做法，我只是添加了我的意见，所以你可以考虑一下。没有冒犯的意思！很高兴您通过 dimshik 的回答解决了这个问题。
如果包含的元素没有边距，我怎么可能“计算包含另一个有边距的元素的高度”？