如何获取溢出的真实.height（）：隐藏或溢出：滚动div？

我有一个关于如何获得div高度的问题。我知道.height()和innerHeight()，但是在这种情况下，它们都没有为我完成这项工作。关键是在这种情况下，我有一个div溢出宽度为div：滚动，并且div具有固定的高度。

如果我使用.height()或innerHeight()，它们都给了我可见区域的高度，但是如果我要考虑溢出的情况，该怎么办？

使用.scrollHeightDOM节点的属性：$('#your_div')[0].scrollHeight

有关.scrollHeight属性的更多信息，请参阅docs：

所述Element.scrollHeight只读属性是一个元素的内容的高度的测量，包括由于溢出内容在屏幕上不可见的。scrollHeight值等于元素所需的最小clientHeight，以便在不使用垂直滚动条的情况下适合视点中的所有内容。它包括元素填充，但不包括其边距。

另一种可能性是将html放置在屏幕的“ overflow：hidden”元素中，例如“绝对顶部”和“左侧”，然后是5000px，然后读取此元素的高度。它很丑，但是效果很好。

我刚刚为此准备了另一种解决方案，不再需要使用-多到高-最大高度值。它需要几行JavaScript代码来计算折叠后的DIV的内部高度，但在那之后，全部是CSS。

1）提取和设置高度

获取折叠元素的内部高度（使用scrollHeight）。我的元素有一个类.section__accordeon__content，实际上我是在forEach()循环中运行它来设置所有面板的高度，但是您明白了。

document.querySelectorAll( '.section__accordeon__content' ).style.cssText = "--accordeon-height: " + accordeonPanel.scrollHeight + "px";

2）使用CSS变量来扩展活动项目

接下来，max-height当项目具有.active类时，使用CSS变量设置值。

.section__accordeon__content.active {
  max-height: var(--accordeon-height);
}

最后的例子

因此，完整示例如下所示：首先遍历所有Accordeon面板并将其scrollHeight值存储为CSS变量。接下来，使用CSS变量作为max-height元素的活动/扩展/打开状态的值。

Javascript：

document.querySelectorAll( '.section__accordeon__content' ).forEach(
  function( accordeonPanel ) {
    accordeonPanel.style.cssText = "--accordeon-height: " + accordeonPanel.scrollHeight + "px";
  }
);

CSS：

.section__accordeon__content {
  max-height: 0px;
  overflow: hidden;
  transition: all 425ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

.section__accordeon__content.active {
  max-height: var(--accordeon-height);
}

那里有。仅使用CSS和几行JavaScript代码（无需jQuery）的自适应最大高度动画。

希望这对将来的人（或我将来的自我）有所帮助。

对于那些没有溢出但以负边距隐藏的对象：

$('#element').height() + -parseInt($('#element').css("margin-top"));

（很难看，但到目前为止仍然有效）

另一个简单的解决方案（不是很优雅，但也不太丑）是放置一个内部，div / span然后获取其高度（$(this).find('span).height()）。

这是使用此策略的示例：

$(".more").click(function(){
if($(this).parent().find('.showMore').length) {
$(this).parent().find('.showMore').removeClass('showMore').css('max-height','90px');
$(this).parent().find('.more').removeClass('less').text('More');
} else {
$(this).parent().find('.text').addClass('showMore').css('max-height',$(this).parent().find('span').height());
$(this).parent().find('.more').addClass('less').text('Less');
}
});

* {transition: all 0.5s;}
.text {position:relative;width:400px;max-height:90px;overflow:hidden;}
.showMore {}
.text::after {
  content: "";
    position: absolute; bottom: 0; left: 0;
        box-shadow: inset 0 -26px 22px -17px #fff;
    height: 39px;
  z-index:99999;
  width:100%;
  opacity:1;
}
.showMore::after {opacity:0;}
.more {border-top:1px solid gray;width:400px;color:blue;cursor:pointer;}
.more.less {border-color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="text">
<span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span></div>
<div class="more">More</div>
</div>

（此特定示例使用此技巧为max-height设置动画，并避免折叠时动画延迟（当对max-height属性使用高数字时）。