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

关键词：

【中文标题】如何获得溢出的真实 .height()：隐藏或溢出：滚动 div？【英文标题】：How do I get the real .height() of a overflow: hidden or overflow: scroll div? 【发布时间】：2011-02-01 03:06:01 【问题描述】：

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

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

【问题讨论】：

【参考方案1】：

我刚刚为此制定了另一个解决方案，不再需要使用 -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 变量来展开活动项

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

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

最终示例

所以完整的例子是这样的：首先循环遍历所有的手风琴面板并将它们的 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）的自适应最大高度动画。

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

【讨论】：

这在 Chrome 中对我不起作用。在 Chrome 中，scrollHeight 的字面意思似乎是启用滚动时的高度。隐藏溢出后，scrollHeight 总是返回等于 clientHeight。【参考方案2】：

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

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

（丑陋但目前只有一个有效）

【讨论】：

【参考方案3】：

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

（这个具体的例子是使用这个技巧来动画最大高度并避免折叠时的动画延迟（当对最大高度属性使用高数字时）。

【讨论】：

【参考方案4】：

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

【讨论】：

根据comment here，.scrollHeight DOM 函数在 IE developer.mozilla.org/en/DOM/element.scrollHeight) 中不起作用 scrollHeight 有时在隐藏（或其父项被隐藏）时也会返回零，这很烦人。 更正确地使用 $('#your_div').prop('scrollHeight'); @Simon 在我的例子中它只返回元素中可见像素的数量overflow: hidden :/ 纯javascript：document.getElementById('your_div').scrollHeight【参考方案5】：

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

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

【讨论】：

【参考方案6】：

其他可能性是将 html 放置在非溢出中：隐藏元素放置在屏幕“外”，例如绝对顶部和左侧小于 5000 像素的位置，然后读取此元素高度。它很丑，但效果很好。

【讨论】：

我不建议将它用于 SEO 问题，这对于屏幕阅读器来说可能看起来很奇怪。如果你这样做，你只需要在你阅读它的时候把 HTML 放在一个 div 中，然后用 javascript 立即删除它。但是对于这种情况，公认的答案更好

jQuery 或 Javascript - 如何在不溢出的情况下禁用窗口滚动：隐藏；

】jQuery或Javascript-如何在不溢出的情况下禁用窗口滚动：隐藏；【英文标题】：jQueryorJavascript-howtodisablewindowscrollwithoutoverflow:hidden;【发布时间】：2013-11-1800:48:13【问题描述】：您好，当我悬停一个元素时，是否可以在不使用overflo... 查看详情

隐藏溢出的响应式垂直中心

...题描述】：在搜索StackOverflow和Google之后，我仍然想知道如何垂直居中大于父元素的图像。我不使用高度，只使用最大高度，因为我想制作一个没有jQuery的响应式解决方案。如果可能的话。这里有一些代码：<divstyle="max-height 查看详情

我需要剪辑或隐藏溢出它的内容，但仅限于一侧

】我需要剪辑或隐藏溢出它的内容，但仅限于一侧【英文标题】：Ineedtocliporhidecontentthatoverflowsitparent,butonlyononeside【发布时间】：2012-10-1316:02:37【问题描述】：我有一个带有单个子DIV的DIV，它可能会或可能不会在其父级的多个侧... 查看详情

文字溢出隐藏

list-item-text-desc{line-height:5.6vw;height:11.2vw;overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;//2行} 查看详情

打开将“溢出：隐藏”分配给正文的模式或窗口时，页面滚动到最顶部

...阅读了10多个主题/问题，但没有一个有效。我最近想出了如何显示隐藏和/或禁用滚动的模式。接下来，我 查看详情

如何隐藏表格行溢出？

】如何隐藏表格行溢出？【英文标题】：HowtohideTableRowOverflow?【发布时间】：2010-12-0600:15:41【问题描述】：我有一些html表格，其中的文本数据太大而无法容纳。因此，它会垂直扩展单元格以适应这种情况。所以现在有溢出的行是... 查看详情

如何将两个或多个元素并排放置并溢出？

】如何将两个或多个元素并排放置并溢出？【英文标题】：HowtoputtwoormoreElementssitnexttoeachotherwithoverflow?【发布时间】：2021-08-2313:52:34【问题描述】：我想知道如何将两个或多个元素并排放置并溢出。如果我改变滑动屏幕的宽度，... 查看详情

隐藏溢出不适用于图像

】隐藏溢出不适用于图像【英文标题】：Hiddenoverflownotworkingonimage【发布时间】：2018-10-0421:14:03【问题描述】：我尝试过使用溢出：隐藏；对于每个元素，但它似乎没有做任何事情html看起来像这样，显示是让2个div并排显示（堆叠... 查看详情

文本溢出隐藏

/*多行溢出隐藏*/divwidth:150px;（100%）；height:100px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;8　　/*单行溢出隐藏*/divwidth:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;　　 查看详情

如何隐藏xslfo上的标题，页面溢出(代码片段)

我有一个标题，一个正文和一个为XslFo页面序列设置的页脚。此页面上的某些项目以keep-together.within-page值为1的块显示。这在大多数情况下都非常有效，但是我注意到，当跨越整个页面的内容绝对不得不打破时，它将最终出现在... 查看详情

如何在颤动中隐藏布局溢出消息

】如何在颤动中隐藏布局溢出消息【英文标题】：Howtohidelayoutoverflowmessageinflutter【发布时间】：2018-10-1011:31:58【问题描述】：我是Flutter的新手。使用底片。底片具有正常的恒定高度。它的高度会随着拖动而增加。请参考下面的... 查看详情

如何隐藏select2上的溢出？

】如何隐藏select2上的溢出？【英文标题】：Howtohideoverflowonselect2?【发布时间】：2013-05-0802:57:46【问题描述】：我正在使用出色的select2jquery控件。我正在尝试使用CSSdiv布局来模仿3单元格表格显示布局。当selected大于当前select2宽度... 查看详情

如何使 CSS3 圆角在 Chrome/Opera 中隐藏溢出

】如何使CSS3圆角在Chrome/Opera中隐藏溢出【英文标题】：HowtomakeCSS3roundedcornershideoverflowinChrome/Opera【发布时间】：2011-08-0920:09:33【问题描述】：我需要父div上的圆角来掩盖其子级的内容。overflow:hidden在简单的情况下工作，但在基于... 查看详情

Chrome和Firefox溢出：隐藏的跳跃元素

...：隐藏；”和一个带有“位置：绝对；”的锚。每当锚点获得焦点时，它上面的元素就会神奇地跳到 查看详情

超详细的文本溢出添加省略号。。。。(代码片段)

前言　　需求：富文本溢出隐藏，超出用省略号表示。　　博主：文本溢出倒是做过不少，这富文本溢出什么鬼？老夫今天就好好研究一下这个省略号。　　ps：富文本溢出，不也是文本溢出么？空格处理？多段落？正文　　1.cs... 查看详情

如何在不使用溢出隐藏的情况下将边框添加到与边框半径完美匹配的表格列

】如何在不使用溢出隐藏的情况下将边框添加到与边框半径完美匹配的表格列【英文标题】：Howdoiaddbordertothetablecolumnthatmatchestheborderradiusperfectlywithoutusingoverflowhidden【发布时间】：2022-01-0117:24:18【问题描述】：我正在尝试在下图... 查看详情

如何隐藏滚动条但保留溢出表的功能？ [复制]

】如何隐藏滚动条但保留溢出表的功能？[复制]【英文标题】：HowcanIhidethescrollbarbutkeepthefunctionalityformyoverflowingtable?[duplicate]【发布时间】：2020-06-1106:42:50【问题描述】：我创建了一个表格，其中包含一个具有特定最大高度的容器... 查看详情

使用溢出时如何移动图像的 POV：隐藏？

】使用溢出时如何移动图像的POV：隐藏？【英文标题】：HowtomovethePOVofanimagewhenusingoverflow:hidden?【发布时间】：2016-08-0818:33:37【问题描述】：所以经过长时间的搜索，我终于找到了如何使用overflow:hidden;在不扭曲/压缩图像的情况下... 查看详情