Как получить реальный .hight() переполнения: скрытый или переполненный: прокрутка div?

У меня вопрос о том, как получить высоту div. Я знаю .height() и innerHeight(), но ни один из них не выполняет эту работу для меня в этом случае. Дело в том, что в этом случае у меня есть div, который переполнен шириной переполнения: прокрутка, а div имеет фиксированную высоту.

Если я использую .height() или innerHeight(), оба из них дают мне высоту видимой области, но если я хочу, чтобы переполненный аккаунт был включен, как мне это сделать?

Ответ 1

Используйте .scrollHeight свойство DOM node: $('#your_div')[0].scrollHeight

Ответ 2

Для получения дополнительной информации о свойстве .scrollHeight см. документы:

Атрибут Element.scrollHeight только для чтения - это измерение высоты содержимого элемента, включая содержимое, не видимое на экране из-за переполнения. Значение scrollHeight равно минимальному значению clientHeight, которое потребуется элементу для размещения всего содержимого в точке обзора без использования вертикальной полосы прокрутки. Включает заполнение элемента, но не его поле.

Ответ 3

Другая возможность - разместить html в непереполнении: скрытый элемент помещен "вне" экрана, например, позиция абсолютная верхняя и левая меньше, а затем 5000 пикселей, а затем прочитайте эту высоту элементов. Его уродливый, но хорошо работает.

Ответ 4

Для тех, кто не переполняется, но скрывается с отрицательным краем:

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

(некрасиво, но пока только один)

Ответ 5

Другое простое решение (не очень элегантное, но и не слишком уродливое) - поместить внутренний 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 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>