overflow : hidden 또는 overflow : scroll div의 실제 .height ()는 어떻게 얻습니까?

overflow : hidden 또는 overflow : scroll div의 실제 .height ()는 어떻게 얻습니까?

---

div 높이를 얻는 방법에 대한 질문이 있습니다. 나는 알고 있어요 .height()하고 innerHeight()있지만, 그들 중 누구도이 경우에 나를 위해 일을하지 않습니다. 문제는이 경우 오버플로 너비가 div 인 div가 있습니다. 스크롤과 div의 높이는 고정되어 있습니다.

내가 사용하는 경우 .height()나 innerHeight(), 둘 다 나에게 가시 영역의 높이를 제공하지만, 내가 계정에 취한 오버 플로워를 원하는 경우 나에 대해 어떻게 가야합니까?

---

.scrollHeightDOM 노드 의 속성을 사용하십시오 .$('#your_div')[0].scrollHeight

---

.scrollHeight속성에 대한 자세한 내용은 다음 문서를 참조하십시오 .

Element.scrollHeight는 읽기 전용 특성 때문에 오버플 화면에 보이지 않는 내용을 포함하는 요소의 내용의 높이를 측정한다. scrollHeight 값은 세로 스크롤 막대를 사용하지 않고 뷰의 모든 내용을 맞추기 위해 요소에 필요한 최소 clientHeight와 같습니다. 요소 패딩은 포함하지만 여백은 포함하지 않습니다.

---

다른 가능성은 HTML을 오버플로가 아닌 비 숨겨진 요소에 배치하는 것입니다 : 위치 절대 상단과 왼쪽 아래로 5000px와 같이 화면의 'out'에 배치 한 다음이 요소 높이를 읽으십시오. 추악하지만 잘 작동합니다.

---

넘치지 않고 네거티브 마진으로 숨어있는 사람들의 경우 :

$('#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 속성에 높은 수를 사용하는 경우).

참고 URL : https://stackoverflow.com/questions/2522579/how-do-i-get-the-real-height-of-a-overflow-hidden-or-overflow-scroll-div