如何在页面加载时可靠地获得两个元素的尺寸

Question

假设我有一个“容器”元素，其中包含overflow:auto，其中包含“contents”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... 
    }; 
}); 

if语句永远不会运行，因为这两个高度是为等于总计算 - 即使我知道这是情况并非如此。随后的检查总是显示实际尺寸。所以我想：也许元素没有完成渲染（我使用@ 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; 
} 

的Javascript

//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