Finding The Full Height Of The Content Of A Page/document That Can Have Absolutely Positioned Elements

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 th

Solution 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 scrollvar k=$('html body').scrollTop();//getrealscroll 
    $('html body').scrollTop(0);//backscrollto0alert(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 elementsif ($(this).css('position') == 'absolute'){//check for position absolute(the only that the browser ignorealert($(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 bottomif(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 offsetheightvar atotoffset=0;
var id="";

$('#but').click(function(){
    $.each($('body *:not(script)'),function(){//get all body elementsif ($(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

Solution 2:

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).

functiongetPageHeight() {
    functiongetUpdatedHeight(element, originalMaxHeight) {
        var top = element.offset().top;
        if(typeof(top)!='undefined'){
            var height = element.outerHeight();
            returnMath.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 elementsif ($(this).css('position') == 'absolute'){ // absolute?
            atotoffset=getUpdatedHeight($(this), atotoffset);
        }
    });

    returnMath.max(maxhrel, atotoffset);
}