Як отримати справжню .height () переповнення: приховано або переповнено: прокручувати div?

У мене є питання, як досягти висоти діва. Я в курсі .height()і innerHeight(), але жоден з них не робить роботу для мене в цьому випадку. Річ у тім, що в цьому випадку у мене є div, який переповнює ширину і переповнює: прокрутка, і div має фіксовану висоту.

Якщо я використовую .height()або innerHeight()обидва вони надають мені висоту видимої ділянки, але якщо я хочу, щоб перелив був врахований, як мені це зробити?

Використовуйте .scrollHeightвластивість вузла DOM:$('#your_div')[0].scrollHeight

Для отримання додаткової інформації про .scrollHeightвласність зверніться до документів :

Атрибут Element.scrollHeight лише для читання - це вимірювання висоти вмісту елемента, включаючи вміст, який не видно на екрані через переповнення. Значення scrollHeight дорівнює мінімальній клієнтській висоті, яку потребує елемент, щоб вмістити весь вміст у точці огляду без використання вертикальної смуги прокрутки. Вона включає в себе елемент прокладки, але не його запас.

Іншою можливістю може бути розміщення html у не переповненні: прихований елемент розміщується 'поза' екрана, як абсолютна позиція верхнього і лівого менше 5000px, а потім зчитувати цю висоту елементів. Це некрасиво, але добре працювати.

Я тільки що підготував інше рішення для цього, де більше не потрібно використовувати значення -мік до великого-максимуму висоти. Для розрахунку внутрішньої висоти згорнутого DIV йому потрібно кілька рядків коду javascript, але після цього - це все CSS.

1) Збір та встановлення висоти

Отримайте внутрішню висоту згорнутого елемента (за допомогою scrollHeight). У мого елемента є клас, .section__accordeon__contentі я насправді запускаю це в forEach()циклі, щоб встановити висоту для всіх панелей, але ви отримуєте ідею.

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

2) Використовуйте змінну CSS для розширення активного елемента

Далі використовуйте змінну CSS для встановлення max-heightзначення, коли у елемента є .activeклас.

.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).

Сподіваюсь, це допоможе комусь у майбутньому (або моєму майбутньому для довідок).

Для тих, хто не переповнюється, а ховається за негативною маржею:

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

(потворний, але лише той, який працює дотепер)

Ще одне просте рішення (не дуже елегантне, але теж не дуже потворне) - розмістити внутрішнє, 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).