페이지로드시 두 요소의 치수를 안정적으로 얻는 방법

Question

overflow:auto의 "내용"div가있는 "컨테이너"요소가 있다고 가정 해보십시오. 컨테이너의 높이가 창 높이의 비율이며, 내용은 어떤 높이 수 : 요청에 따라

<div id="container">// Height dependent on window size 
    <div id="content"> 
    // Arbitrary amount of content here 
    </div> 
</div> 

CSS - 내 "현실 세계"시나리오에 유의하시기 바랍니다, 내용 요소는 테이블 규칙, 실제로

#container { 
    height:100%; 
    overflow:auto 
} 

#content { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

내가하고 싶은 것은 내용의 높이가 컨테이너의 높이를 초과하는지 확인하고 실제로 무엇인가를하는 것입니다.

그러나, 나는 간단하게 할 경우 : 문은 결코 실행하지 않는 경우 두 개의 높이가 항상 동일한 것으로 계산되기 때문에

는

$(document).ready(function(){ 
    var containerH = $('#container').outerHeight(); 
    var contentH = $('#content').outerHeight(); 
    if (contentH > containerH) { 
     // If the content's too big, do things... 
    }; 
}); 

1, - 나는 경우가 그을 알고 경우에도. 후속 검사는 항상 실제 치수를 나타냅니다.

그래서 나는 엘리먼트가 렌더링이 완료되지 않았을 것이라고 생각했다. (엘리먼트의 스타일을 지정하기 위해 @ font-face를 사용하고있다. 아마도 완성을 기다릴 필요가있다.) 그런 다음 :

$(document).ready(function(){ 

    var container = $('#container'); 
    var content = $('#content'); 

    function getProperHeight(el){ 
     var height = el.load(function(){ 
      var h = this.outerHeight(); 
      return h; 
     }); 
     return height; 
    }; 

    var containerH = getProperHeight(container); 
    var contentH = getProperHeight(content); 

    console.log(containerH + ' ' + contentH) 

}; 

나는 load() 방법을 사용하여 얻은 가장 가까운,하지만 난 둘 다 기대 값 [개체 개체]를 얻을 수있다.

간단히 말해서 두 요소의 실제 렌더링 된 치수는 어떻게 얻을 수 있습니까?

Answer 1

당신은이 같은 ...

HTML

<div id="container"> 
    <div id="listingNav"> 
    <a id="back">Back </a> 
    <div id="paginationNav"></div> 
    <a id="next"> Next</a> 
    </div> 
    <div id="content"> 
    // Arbitrary amount of content here 
    </div> 
</div> 

CSS

#content { 
    overflow:hidden; 
} 

자바 스크립트

//set how tall you want you container to be 
var divHeight = 624; 

$(document).ready(function() 
{ 
    //get the height of the container without styles 
    var contentHeight = $('#content').height(); 
    //then add styles to the container 
    $('#content').css('height', divHeight + 'px'); 
    //find out how many pages there will be 
    var divPages = Math.ceil(contentHeight/divHeight); 
    //loop through and create the page # anchors 
    for(var i = 1; i <= divPages; i++) 
    { 
     $("#paginationNav").append('<a id="' + i + '" onclick="javascript:goToPage(this)">' + i + '</a>'); 
    } 
    //wrap every in #content with a div with the class of .content 
    $('#content').children().wrapAll('<div class="content"/>'); 
    //program the paganation effect for next 
    $('#next').click(function() { 
     var current = ($('.content').css('margin-top') || '0px'); 
     if((current.substring(0,current.length-2) - divHeight) > -contentHeight) 
     { 
      $('.content').css('margin-top',current.substring(0,current.length-2) - $('#listingContainer').height() + 'px'); 
     } 
    }); 
    //program the paganation effect for back 
    $('#back').click(function() { 
     var current = ($('.content').css('margin-top') || '0px'); 
     if(current.substring(0,current.length-2) < 0) 
     { 
      $('.content').css('margin-top',(current.substring(0,current.length-2) - -$('#listingContainer').height()) + 'px'); 
     } 
    }); 
}); 
//program the paganation effect for each of the page # anchors 
function goToPage(page) 
{ 
    $('.content').css('margin-top', -((divHeight * page.id) - divHeight)); 
} 

희망을 수이 도움이됩니다.

오 .....이 jQuery를 1.9.1