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

如果这可以给你一些帮助：

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，即ff，opera，safari）中测试它，但只有2个div（1个绝对值1个不是），通过改变高度和玩边距顶部/底部和顶部/底部。请检查并告诉我：

Answer 2

这是我正在使用的功能。主要的改进是它适用于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);
}

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

2 个答案: