div 내부의 텍스트 높이에 따라 달라집니다.

Question

일부 텍스트가 포함 된 DIV가 있습니다. 하지만 DIV의 높이는 0px에서 시작하며 '오버플로 : 숨김'도 있습니다. 그 후 DIV 높이를 높이기 위해 애니메이션 시스템을 사용하고 있습니다. DIV 안에있는 텍스트의 길이가 다양하기 때문에 DIV에 고정 높이를 부여 할 수는 없습니다.

DIV의 높이가 그 안에있는 모든 콘텐츠를 넣을만큼 충분히 클 때 말할 수있는 방법이 있습니까?

Answer 1

어쩌면 당신이 시도 할 수 있습니다 :

다른 DIV와 같은 내부의 텍스트를 넣어 ...

<div> 
    <div>some text</div> 
</div> 

그런 다음 내부의 높이에 따라 (AN 숨겨진 오버플로하는) 외부 DIV 애니메이션 div (숨겨진 오버플로가 없음).

희망이 "자동"는 내용을 채우기 위해 확장 보장한다로 설정하기 때문에 높이를 알 필요가 없습니다를 사용하여/당신이 무슨 일을하는지에 따라

Answer 2

을하는 데 도움이됩니다.

그러나 자바 스크립트를 사용하여 높이를 알 때까지 높이를 0으로 설정할 수도 있습니다. 예 : jQuery의 경우 :

이제 각 div에는 원래 높이 값을 갖는 "data-height"라는 속성이 있습니다. 그런 다음 필요할 때 div를 확장 할 수 있습니다.

Answer 3

div를 애니메이션으로 표시하기 직전에 div를 복제하고 height:0px 제약을 제거하십시오 (예 : 자동 높이 변경). 그런 다음 복제 된 div의 높이를 애니메이션에 사용하십시오.

var myDiv = $('div'); 
var myDivClone = div.clone().insertAfter(myDiv).css('height','auto'); 
var myDivHeight = myDivClone.outerHeight(); 
myDivClone.remove(); 
myDiv.animate({height: myDivHeight}, 250); 

참고 단지 새로운 하나를 만들고 같은 내용으로 작성 반대로 실제로 질문에 요소를 복제의 중요성 :

jQuery를,이 같은 것을 보일 것이다. 당신은 등

ALSO 참고 클래스를 포함, (당신이 나중에 어떻게 높이 수정 제외) 정확히 요소, 바로 myDiv 후 DOM으로 주입의 중요성을 다시해야합니다. 이것은 같은 CSS가 높이 계산시 myDiv에 영향을 미치므로 영향을줍니다. 유일한 예외는 CSS에서 :last-child 선택기를 사용하고 있고 복제본이 상위 요소의 마지막 하위가되는 경우입니다. 그러나 그러한 문제는 쉽게 해결할 수 있어야합니다.

Answer 4

if(el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth) 
{ 
    //keep making element bigger 
    el.style.height = parseInt(el.style.height) + 2 + "px" 
} 

이 스 니펫은 일종의 재귀 함수 또는 반복문 안에있을 수 있습니다. 본질적으로 볼 수있는 영역 밖에 스크롤바가 표시 될 내용이 더 있는지 확인하려고합니다.

Answer 5

먼저 화면 div를 벗어난 텍스트를 삭제하고 그 크기를 가져 오는 방법은 무엇입니까?

Answer 6

나는 끔찍한 해킹을 시도했지만 이것이 충분히 좋은지 확인합니다. 은 기본적으로 당신은, 자동으로 높이를 설정 0으로 재설정하고 마지막으로 다음과 같이 애니메이션 기능을 사용하여 컨텐츠 높이를 얻을 : .sample 변수 텍스트 내용과 사업부에 대한 참조입니다

var tempHeight = $(".sample").css({"height" : "auto"}).height(); 
$(".sample").css({"height" : "0px"}).animate({ 
    height : tempHeight 
},1000); 

. 더 나은 이해를 위해 데모를 확인하십시오.

순수 자바 스크립트 버전 :

document.getElementById("sample").style.height = "auto"; //The id of this div is 'sample' 
var tempheight = document.getElementById("sample").offsetHeight; 
document.getElementById("sample").style.height = "0px"; 
/* 
Custom Animation function, Use tempheight to get the full content 
*/ 

DEMO For The Jquery Version