Finding the full height of the content of a page/document that can have absolutely positioned elements

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 th

Answer 1

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:

Scan me
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