查找可以具有绝对定位元素的页面/文档内容的完整高度

Question

我正在尝试获取页面的高度（可能加载到 iframe 中），该页面的绝对定位元素延伸到页面的正常底部下方。以下是我尝试过的事情：

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

这些都不关注绝对定位的元素。另一种问这个问题的方法：如何找到页面上“最低”元素的位置（即页面最下方）？

听起来这个问题与这个问题非常相关：Get height of document content including absolute/fixed positioned elements

Answer 1

这是我正在使用的功能。主要的改进是它适用于 IE 和 chrome（而 Alessandro 的原始作品适用于 Firefox，但高度对于 IE 和 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

如果这能给你一些帮助：

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

这个命令也给了我相同的值：

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

我尝试了这个脚本，但应该改进它，因为它在不同的浏览器上给出不同的结果。

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
});

我想建议你一个脚本，考虑是否有绝对元素，找到高度：

<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);}
});

由于时间的关系，我无法完善它，但我认为这可以帮助你 还要检查jsfiddle

编辑： 这是我制作的最后一个代码并且似乎有效，我在不同的浏览器（chrome，ie，ff，opera，safari）中测试了它，但只有 2 个 div（1 个绝对 e 1 不是），通过改变高度和玩边距顶部/底部和顶部/底部。请检查并告诉我：

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