¿Cómo obtengo el .height real () de un overflow: hidden o overflow: scroll div?

Tengo una pregunta sobre cómo obtener una altura div. Soy consciente de .height()y innerHeight(), pero ninguno de ellos hace el trabajo por mí en este caso. Lo que pasa es que en este caso tengo un div que se desborda ancho un desbordamiento: desplazarse y el div tiene una altura fija.

Si uso .height()o innerHeight(), ambos me dan la altura del área visible, pero si quiero que se tenga en cuenta el desbordamiento, ¿cómo hago?

Use la .scrollHeightpropiedad del nodo DOM:$('#your_div')[0].scrollHeight

Para obtener más información sobre la .scrollHeightpropiedad, consulte los documentos :

El atributo Element.scrollHeight de solo lectura es una medida de la altura del contenido de un elemento, incluido el contenido no visible en la pantalla debido al desbordamiento. El valor scrollHeight es igual al valor mínimo clientHeight que requeriría el elemento para ajustar todo el contenido en el punto de vista sin usar una barra de desplazamiento vertical. Incluye el relleno del elemento pero no su margen.

Otra posibilidad sería colocar el html en un no desbordamiento: elemento oculto colocado 'fuera' de la pantalla, como una posición absoluta superior e izquierda, luego 5000px, luego lea la altura de este elemento. Es feo, pero funciona bien.

Acabo de preparar otra solución para esto, donde ya no es necesario usar un valor de -much a high-max-height. Necesita algunas líneas de código JavaScript para calcular la altura interna del DIV colapsado, pero después de eso, todo es CSS.

1) Recolección y ajuste de altura

Obtenga la altura interna del elemento contraído (usando scrollHeight). Mi elemento tiene una clase .section__accordeon__contenty en realidad lo ejecuto en un forEach()bucle para establecer la altura de todos los paneles, pero se entiende la idea.

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

2) Use la variable CSS para expandir el elemento activo

Luego, use la variable CSS para establecer el max-heightvalor cuando el elemento tenga una .activeclase.

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

Ejemplo final

Entonces, el ejemplo completo es así: primero recorra todos los paneles de acordeón y almacene sus scrollHeightvalores como variables CSS. Luego use la variable CSS como el max-heightvalor en el estado activo / expandido / abierto del elemento.

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);
}

Y ahí lo tienes. Una animación adaptativa de altura máxima que utiliza solo CSS y algunas líneas de código JavaScript (no se requiere jQuery).

Espero que esto ayude a alguien en el futuro (o mi futuro yo como referencia).

Para aquellos que no se desbordan sino que se esconden por un margen negativo:

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

(feo pero solo uno que funciona hasta ahora)

Otra solución simple (no muy elegante, pero tampoco demasiado fea) es colocar un interior y div / spanluego obtener su altura ( $(this).find('span).height()).

Aquí hay un ejemplo del uso de esta estrategia:

$(".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>

(Este ejemplo específico usa este truco para animar la altura máxima y evita el retraso de la animación al colapsar (cuando se usa un número alto para la propiedad de altura máxima).