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

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

css html javascript

gatapia · 技术社区 · 14 年前

我正在尝试获取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 回复 | 直到 14 年前

Alconja 14 年前

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

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

谢谢

Anthony 14 年前

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

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

$(document).height();

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

$("body").height();

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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前