代码之家 › 专栏 › 技术社区 › gatapia

HTML窗口内容的高度(不仅仅是视区高度)

css html javascript

gatapia · 技术社区 · 15 年前

我正在尝试获取HTML窗口内容的高度。这是内容的完整高度,而不是可见高度。我在以下方面(非常有限)取得了一些成功: document.getElementsByTagName('html')[0].offsetHeight 在Firefox中。

但在IES中失败,在使用绝对定位元素时在Chrome中失败。( http://code.google.com/p/chromium/issues/detail?id=38999 )

可用于复制此文件的示例HTML文件是:

<html>
    <head>
<style>
div {
    border:solid 1px red;
    height:2000px;
    width:400px;
}
.broken {
    position:absolute;
    top:0;
    left:0;
}
.fixed {
    position:relative;
    top:0;
    left:0;
}
</style>
<script language='javascript'>
window.onload = function () {
    document.getElementById('window.height').innerHTML = window.innerHeight;    
    document.getElementById('window.screen.height').innerHTML = window.screen.height;
    document.getElementById('document.html.height').innerHTML = document.getElementsByTagName('html')[0].offsetHeight;
}
</script>
    </head>
    <body>
        <div class='fixed'>
            window.height: <span id='window.height'>&nbsp;</span> <br/>
            window.screen.height: <span id='window.screen.height'></span> <br/>
            document.html.height: <span id='document.html.height'></span> <br/>
        </div>
    </body>
</html>

谢谢大家

圭托帕皮亚

2 回复 | 直到 15 年前

Alconja 15 年前

我找到的最佳解决方案是:

document.documentElement.scrollHeight ( scrollWidth 宽度)。安东尼上面提到,这可能有一些怪癖的问题,但这似乎对我的目的很好。

谢谢

Anthony 15 年前

我好像记得以前做过这样的事。为了清楚起见,您需要滚动条下面的内容高度以及屏幕上的内容,对吗?

您尝试过使用jquery吗?他们有一个内置的方法 height() 它将返回任何DOM元素的计算高度。因此,要使文档的高度高于或低于折叠,请使用:

$(document).height();

要测试它,您可以将其与:

$("body").height();

jquery的另一个快速插件:如果您尝试使用直JS进行此操作,您将遇到IE不支持与Firefox和Safari相同高度属性的问题。因此,它不仅使jquery变得更简单,而且使跨浏览器变得更简单。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

3 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

3 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

3 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

3 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前