查找可以具有绝对定位元素的页面/文档的内容的完整高度 [英] Finding the full height of the content of a page/document that can have absolutely positioned elements

问题描述

我试图获得一个页面的高度（可能被加载到一个iframe中），它具有绝对定位的元素，它们扩展到页面的正常底部。这是我尝试过的东西：

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

推荐答案

如果可以给您一些帮助：

If this can give you some help:

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

此命令给我相同的值：

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

我尝试使用这个脚本，但应该改进，因为它会给不同的浏览器带来不同的结果。 p>

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

我无法根据时间进行细化，但我认为这可以帮助您
检查 jsfiddle

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

编辑：
这是我做的最后一个代码，似乎有效，我在不同的浏览器（chrome，ie，ff，opera，safari）中测试，但只有2个div（1个绝对e 1不）通过改变高度和玩弄顶部/底部和顶部/底部的边缘。请检查一下，让我知道：

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

这篇关于查找可以具有绝对定位元素的页面/文档的内容的完整高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！