동적으로 내용을 추가 한 후 div의 높이를 계산하는 방법은 무엇입니까?

Question

동적 콘텐츠 (이미지 및 텍스트)가있는 div가 있습니다. 그럼 div의 높이를 계산하고 그것에 뭔가 할 필요가 있습니다.

그러나 콘텐츠가 추가되기 전에 현재 div의 높이를 계산하고 있습니다.

누구에게도 해결책이 있습니까?

$('#results').find('article').addClass(result); // add class to entire section 
$('#results article').find('.details h1 span').html(title); // add title 
$('#results article').find('.details p').html(message); // add message 

var windowHeight = $('#results').find('article').innerHeight(); 

Answer 1

콘텐츠에 이미지가있는 것 같습니다. 당신은 부하에 기다려야 할 것이다 :

var $results = $('#results'), 
    $article = $results.find('article'), 
    deferreds = []; 

$article.addClass(result); // add class to entire section 
$article.find('.details h1 span').html(title); // add title 
$article.find('.details p').html(message); // add message 

$results.find('img').each(function() 
{ 
    var deferred = $.Deferred(); 

    deferreds.push(deferred); 

    this.onload = function() { deferred.resolve(); } 
}); 

$.when.apply($, deferreds).then(function() 
{ 
    var windowHeight = $article.innerHeight(); 
}); 

이 방법은 jQuery의 Deferreds, 그것은 아주 쉽게 모든 load 이벤트를 추적 할 수있는을 사용합니다.

Answer 2

아직로드되지 않은 이미지에 문제가없는 경우 원하는 크기를 얻을 수 있도록 레이아웃을 직접 트리거해야 할 수 있습니다.

브라우저는 일반적으로 스크립트가 끝날 때까지 새 콘텐츠를 레이아웃하지 않습니다 (그리고 DOM 변경이 완료된 것 같습니다). DOM에 브라우저가 필요로하는 관련 차원을 요구함으로써 스크립트에서 레이아웃을 트리거 할 수 있습니다.

레이아웃을 트리거 할 속성 목록은 http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html을 참조하십시오.

Answer 3

당신은

$(window).load(function(){ 

    var divHeight = $('#yourDivId').height() 
} 

그것이