jQuery 如何获得真正的 .height() 溢出：隐藏或溢出：滚动 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2522579/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get the real .height() of a overflow: hidden or overflow: scroll div?
提问by emilolsson
I have a question regarding how to get a div height. I'm aware of .height()and innerHeight(), but none of them does the job for me in this case. The thing is that in this case I have a div that is overflown width a overflow: scroll and the div has a fixed height.
我有一个关于如何获得 div 高度的问题。我知道.height()and innerHeight()，但在这种情况下，他们都没有为我做这项工作。问题是，在这种情况下，我有一个 div 溢出宽度溢出：滚动并且 div 具有固定高度。
If I use .height()or innerHeight(), both of them gives me the height of the visible area, but if I want the overflown taken in to account, how do I go about?
如果我使用.height()or innerHeight()，它们都给了我可见区域的高度，但如果我想考虑溢出，我该怎么办？
回答by reko_t
Use the .scrollHeightproperty of the DOM node: $('#your_div')[0].scrollHeight
使用.scrollHeightDOM 节点的属性：$('#your_div')[0].scrollHeight
回答by Ajeesh Vijay
For more information about .scrollHeightproperty refer to the docs:
有关.scrollHeight属性的更多信息，请参阅文档：
The Element.scrollHeightread-only attribute is a measurement of the height of an element's content, including content not visible on the screen due to overflow. The scrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element padding but not its margin.
所述Element.scrollHeight只读属性是一个元素的内容的高度的测量，包括由于溢出内容在屏幕上不可见的。scrollHeight 值等于元素需要的最小 clientHeight，以便在不使用垂直滚动条的情况下适应视点中的所有内容。它包括元素填充但不包括它的边距。
回答by user3018731
Other possibility would be place the html in a non overflow:hidden element placed 'out' of screen, like a position absolute top and left lesse then 5000px, then read this elements height. Its ugly, but work well.
其他可能性是将 html 放置在非溢出中：隐藏元素放置在屏幕“外”，例如位置绝对顶部和左侧小于 5000 像素，然后读取此元素的高度。它丑陋，但运作良好。
回答by davefrassoni
For those that are not overflowing but hiding by negative margin:
对于那些没有溢出但以负边距隐藏的人：
$('#element').height() + -parseInt($('#element').css("margin-top"));
(ugly but only one that works so far)
（丑陋但目前只有一种有效）
回答by mondi
Another simple solution (not very elegant, but not too ugly also) is to place a inner div / spanthen get his height ($(this).find('span).height()).
另一个简单的解决方案（不是很优雅，但也不太难看）是放置一个内部div / span然后获取他的高度（$(this).find('span).height()）。
Here is an example of using this strategy:
以下是使用此策略的示例：
$(".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>(This specific example is using this trick to animate the max-height and avoiding animation delay when collapsing (when using high number for the max-height property).
（这个特定的例子是使用这个技巧来为 max-height 设置动画并在折叠时避免动画延迟（当 max-height 属性使用高数时）。
