Como obtenho o real .height () de um overflow: hidden ou overflow: scroll div?

Eu tenho uma pergunta sobre como obter uma altura div. Estou ciente .height()e innerHeight(), mas nenhum deles faz o trabalho para mim neste caso. O fato é que, neste caso, eu tenho uma div que está sobrecarregada, uma largura excedente: scroll e a div tem uma altura fixa.

Se eu uso .height()ou innerHeight(), os dois me dão a altura da área visível, mas se eu quero que o excesso seja levado em conta, como devo proceder?

Use a .scrollHeightpropriedade do nó DOM:$('#your_div')[0].scrollHeight

Para obter mais informações sobre .scrollHeightpropriedade, consulte os documentos :

O atributo somente leitura Element.scrollHeight é uma medida da altura do conteúdo de um elemento, incluindo o conteúdo não visível na tela devido ao estouro. O valor scrollHeight é igual ao clientHeight mínimo que o elemento exigiria para ajustar todo o conteúdo no ponto de vista sem usar uma barra de rolagem vertical. Inclui o preenchimento do elemento, mas não a sua margem.

Outra possibilidade seria colocar o html em um não transbordamento: elemento oculto colocado 'fora' da tela, como uma posição absoluta superior e esquerda, depois 5000px, e depois ler a altura desses elementos. É feio, mas funciona bem.

Acabei de criar outra solução para isso, onde não é mais necessário usar um valor muito alto a muito alto. Ele precisa de algumas linhas de código javascript para calcular a altura interna do DIV recolhido, mas depois disso, é tudo CSS.

1) Buscando e ajustando a altura

Busque a altura interna do elemento recolhido (usando scrollHeight). Meu elemento tem uma classe .section__accordeon__contente na verdade eu executo isso em um forEach()loop para definir a altura de todos os painéis, mas você entendeu.

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

2) Use a variável CSS para expandir o item ativo

Em seguida, use a variável CSS para definir o max-heightvalor quando o item tiver uma .activeclasse.

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

Exemplo final

Portanto, o exemplo completo é o seguinte: primeiro faça um loop em todos os painéis do acordeão e armazene seus scrollHeightvalores como variáveis ​​CSS. Em seguida, use a variável CSS como o max-heightvalor no estado ativo / expandido / aberto do 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);
}

E aí está. Uma animação de altura máxima adaptável usando apenas CSS e algumas linhas de código JavaScript (não é necessário jQuery).

Espero que isso ajude alguém no futuro (ou meu futuro eu para referência).

Para aqueles que não estão transbordando, mas escondidos por margem negativa:

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

(feio, mas apenas um que funciona até agora)

Outra solução simples (não muito elegante, mas também não muito feia) é colocar um interior div / spane obter sua altura ( $(this).find('span).height()).

Aqui está um exemplo de uso desta estratégia:

$(".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 exemplo específico está usando este truque para animar a altura máxima e evitando o atraso da animação ao recolher (ao usar um número alto para a propriedade altura máxima).