Question

我有一个关于如何获得div高度的问题。我知道.height()和innerHeight()，但在这种情况下，他们都没有为我做这项工作。问题是，在这种情况下，我有一个溢出宽度溢出的div：scroll和div有一个固定的高度。

如果我使用.height()或innerHeight()，它们都会显示可见区域的高度，但如果我想要考虑溢出，我该怎么办？

Answer 1

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

Answer 2

有关.scrollHeight属性的详细信息，请参阅docs：

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

Answer 3

其他可能性是将html放在非溢出：隐藏元素放置在屏幕外，就像绝对顶部和左边的位置然后减去5000px，然后读取此元素高度。它很难看，但效果很好。

Answer 4

我刚刚为此准备了另一种解决方案，不再需要使用-much至high-max-height值。它需要几行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类时，使用CSS变量设置.active值。

.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）的自适应最大高度动画。

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

Answer 5

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

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

（丑陋，但目前为止只有一个可行）

Answer 6

另一个简单的解决方案（不是非常优雅，但也不是太丑陋）是放置内部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属性时）。

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

6 个答案: