javascript中的页面高度

Posted 2023-03-05

【中文标题】javascript中的页面高度

【英文标题】：height of page in javascript

【发布时间】：2010-11-11 23:18:40

【问题描述】：

当页面大于屏幕时，我无法在 javascript 中获取页面的高度。

我认为这会让我得到正确的身高：

$(document).height();

但这只是获取屏幕的高度，与：

$('body').height();

同：

document.offsetHeight;

出于某种原因，所有这些示例都只返回屏幕的高度。有人可以帮忙吗？

【问题讨论】：

jQuery 的哪个版本？根据文档，$(document).height() 从 1.2 开始返回整个文档的高度

【参考方案1】：

我一直在寻找这个并降落在这里。如果没有 Jquery，你也可以使用普通的 JS 来获得它。以下作品：

console.log(document.body.clientHeight,document.body.scrollHeight,document.body.offsetHeight)

请注意以下链接以阐明使用哪个： Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

【参考方案2】：

如果您对使用 jQuery 很满意，那么获取 body 或 html 高度呢？喜欢：

var winHeight = $('body').height();

【参考方案3】：

使用 jQuery（您确实指定了），$(document).height() 将准确返回您所要求的内容。

澄清height()方法的用法：

$('.someElement').height(); // returns the calculated pixel height of the element(s)
$(window).height();         // returns height of browser viewport
$(document).height();       // returns height of HTML document

我怀疑，如果 $(document).height() 不适合你，那是有问题的。你可能是：

太早了。比如，在 DOM 准备好之前 有一些未清除的浮动不会导致某些块级元素扩展到其实际高度。从而打乱了高度计算。 绝对定位一些关键的东西。绝对定位的元素不会影响其父元素的高度计算。

【讨论】：

谢谢杰森。正如您在第一个建议中所说，我过早地调用了该函数。对于每个新页面，都有一些 ajax 东西可以刷新页面的几个部分。

【参考方案4】：

不确定 JQuery。但是此链接可能会帮助您了解各种属性以及它们在不同浏览器中的不同模式下的行为方式。

http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html

【参考方案5】：

我认为您需要添加window.pageYOffset（页面滚动的数量，以像素为单位）。

http://www.quirksmode.org/dom/w3c_cssom.html