javascript - jQuery - 获取绝对div中内容的高度

标签 javascript jquery html css

<分区>

有类似的问题，但没有答案有帮助。

我有一个包含一些内容的绝对 div，我想获得这个 div 的“真实”高度(不是可见部分的高度)。我想这是这个 div 的所有 child 的高度总和。

https://jsfiddle.net/h7mamr4s/ - 如您所见，height()、outerHeight() 和 innerHeight() 方法仅返回可见 div 的高度。 “真实”高度应该更大。

有没有办法用纯 JavaScript 或 jQuery 来做到这一点？我使用 jQuery 1.11.2(不，由于某些原因我无法更新)。

console.log("height(): " + $("#content").height());
console.log("outerHeight(): " + $("#content").outerHeight());
console.log("innerHeight(): " + $("#content").innerHeight());

#content {
  border: 1px solid #000;
  margin-top: 35px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
  width: 100%;
  z-index: 1;
}

<script src="https://code.jquery.com/jquery-1.11.2.js"></script>

<div id="content">
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
  <span>smth</span><br />
</div>

最佳答案

试试这个 document.getElementById("content").scrollHeight

关于javascript - jQuery - 获取绝对div中内容的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40973478/

上一篇：html - Bootstrap - 具有相同结构的导航栏和页脚

下一篇：html - 使用 sass 覆盖 <td> 的 <tr> 样式

相关文章：

javascript - 如何以编程方式仅选择用户可选择的所有文本节点

javascript - 如何摆脱浏览器的 native 工具提示？

jquery - 删除动态 JQuery UI 选项卡

javascript - ruby on rails 显示登陆页面不同于本地主机和 html 文件

PHP/HTML : activate users through admin page using radio button

javascript - js.erb 不执行 javascript 但已处理 rails

javascript - 等待动态时间后添加类(class)

javascript - html文件上传后如何加载到iframe中？

曾经工作的 jquery 脚本不适用于 jquery 1.4.2

css - 如何拉伸(stretch)背景内容？

©2024 IT工具网联系我们