Question

我必须计算div的大小。 Jquery有一个方便的功能，即outerHeight()。这会为您提供元素的大小，如果您想要包含边距，则可以调用outerHeight(true)。

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

外部div的外部高度为18，内部高度为218，外部高度为18，文本为18，边距为100px。

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

中包含的内容边距

Answer 1

我会认为你的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/

或许您可能不需要包装器，如果您可以根据需要将内部divs边距更改为填充。

Answer 2

这有点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>

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

2 个答案: