Finding the full height of the content of a page/d

Question

I'm trying to get the height of a page (which might be loaded in an iframe) that has absolutely positioned elements that extend below the normal bottom of the page. Here are the things I've tried:

document.body.scrollHeight
document.body.offsetHeight
document.documentElement.clientHeight
document.documentElement.scrollHeight 
document.documentElement.offsetHeight

$(document.documentElement).height()
$("html").outerHeight()
$("body").outerHeight()
$(document.html).height()

None of these pay attention to the absolutely positioned elements. Another way to ask this question: How do I find the position of the element which is the "lowest" on the page (ie is farthest down a page)?

Sounds like this question is very related to this one: Get height of document content including absolute/fixed positioned elements

Answer 1

Here's the function I'm using. The major improvement is that it works for IE and chrome (whereas Alessandro's original works for firefox, but gives heights far too large for IE and chrome).

function getPageHeight() {
    function getUpdatedHeight(element, originalMaxHeight) {
        var top = element.offset().top;
        if(typeof(top)!='undefined'){
            var height = element.outerHeight();
            return Math.max(originalMaxHeight, top+height);
        } else {
            return originalMaxHeight;
        }
    }

    var maxhrel = 0;
    if( ! $.browser.msie) {
        maxhrel = $("html").outerHeight(); //get the page height
    } else {
        // in IE and chrome, the outerHeight of the html and body tags seem to be more like the window height
        $('body').children(":not(script)").each(function(){ //get all body children
            maxhrel=getUpdatedHeight($(this), maxhrel);
        });
    }

    var atotoffset=0;  // absolute element offset position from the top
    $.each($('body *:not(script)'),function(){   //get all elements
        if ($(this).css('position') == 'absolute'){ // absolute?
            atotoffset=getUpdatedHeight($(this), atotoffset);
        }
    });

    return Math.max(maxhrel, atotoffset);
}

Answer 2

If this can give you some help:

alert($('body')[0].scrollHeight);

also this command give me the same value:

alert($('body').context.height);

I tryed with this script but it should be improved cause it gives different result with different browser.

var k=0;
var off = document.documentElement.offsetHeight;
$('#but').click(function(){
    //let's go faster here (first 3 before the user touch something
    $('html body').scrollTop(9999999); //best scroll
    var k=$('html body').scrollTop();//getrealscroll 
    $('html body').scrollTop(0);//backscrollto0
    alert(off+k);//the height
});

I would like to suggest you a script that, considering if there is absolute element, find the height:

<button id="but">Scan me</button>
var maxhabs = 0;
var maxhrel = 0;
var realh = 0;
var top=0;
var topbottom=0;
var off = document.body.offsetHeight; //get the offsetheight
$('#but').click(function(){
    $.each($('body *:not(script)'),function(index,value){//get all body elements
        if ($(this).css('position') == 'absolute'){//check for position absolute(the only that the browser ignore
            alert($(this).css('top')+'   '+$(this).css('bottom'));//check for top and bottom properties (and for every css properties that can move the object down)
            if(!isNaN($(this).css('top').replace('px',''))){//get max top or max negative bottom
                if(topbottom < $(this).css('top').replace('px','')){
                    topbottom=$(this).css('top').replace('px','');
                }
            }
            if(!isNaN($(this).css('bottom').replace('px',''))){
                if(topbottom < (-$(this).css('bottom').replace('px',''))){
                    topbottom=(-$(this).css('bottom').replace('px',''));
                }   
            }   
        }
    });
    //confront the height, get the higher
    maxhabs = topbottom;
    maxhrel = off;
    alert('offsetheight:'+off);
    alert('maxhabs:'+maxhabs);
    if(maxhrel>maxhabs){alert('higher:'+maxhrel)}else{alert('higher:'+maxhabs);}
});

I cannot refine it because of the time but I think this can help you check also the jsfiddle

EDIT: This is the last code I made and seems to works, i tested it in differents browsers (chrome,ie,ff,opera,safari) but with just 2 divs (1 absolute e 1 not), by changing the heights and by playing with margin top/bottom and top/bottom. Please, check it and let me know:

var maxhabs = 0;
var maxhrel = document.body.offsetHeight; //get the offsetheight
var atotoffset=0;
var id="";

$('#but').click(function(){
    $.each($('body *:not(script)'),function(){//get all body elements
        if ($(this).css('position') == 'absolute'){//is absolute?
            if(typeof($(this).offset().top)!='undefined'){//defined?
                if(atotoffset < $(this).offset().top+$(this).context.offsetHeight){             
                    atotoffset=$(this).offset().top+$(this).context.offsetHeight;
                    idabs = $(this).context['id'];
                }//works for -/+ margin top/bottom & top/bottom crosssbrowser
            }
        }
    });
    maxhabs = atotoffset;//absolute element offset position from the top 
    if(maxhrel>maxhabs){
        alert('higher:'+maxhrel);
    }else{
        alert('higher:'+maxhabs+' for the element:'+idabs);
    }

});

JSFIDDLE