$(document).height() 在刷新时随机化值（Safari 5.1.10）

Question

我使用 $(document).height() 在块上设置 height CSS 属性。这是 Safari 5.1.10 (OSX 10.6.8) 的解决方法，因为 vh 单位 ( 视口高度 ) 不适用于此版本。

(function() {
    if(!Modernizr.cssvhunit) $("#sidebar").css("height", $(document).height()+"px");
})();

问题是每次刷新页面时$(document).height()返回的值都不一样。有时是 viewport 高度，有时是 document 高度，有时是两者之间的值...

我使用：Modernizr 2.8.3检测vh单元支持，jQuery 1.11.0, Lightbox 2.7.1（没有它仍然会出现问题）和 Skeleton 2.0.4.

我也试过这个解决方法，但没有用：

function getDocHeight() { var D = document; return Math.max( D.body.scrollHeight, D.documentElement.scrollHeight, D.body.offsetHeight, D.documentElement.offsetHeight, D.body.clientHeight, D.documentElement.clientHeight ); }

我不知道什么会导致这个假定的常量值可变...

Answer 1

有时它有助于测量高度和宽度一段时间后。

setTimeout(function() {
  // get w, h
},1);

说明：JS-in-the-browser 是一个基于事件的前端系统。重复以下步骤：

收到user/timeout/AJAX事件
运行 JavaScript 听众（如果有的话）
重新渲染 DOM 更改

页面渲染发生在#3，但您的 JS 代码运行s 在 #2，before final/proper 显示元素的大小确定。当#3 已经完成时，在#2 中设置一个非常短的超时将重新运行 3 步循环。

这就是为什么没有效果，当你隐藏一个元素，然后显示它，甚至重复 100 次时：#2 期间没有渲染发生，如果你让它显示，#3 将发现没有变化，什么都没有发生了。

嗯，不太优雅，写一个UI程序需要额外的努力，它无法在需要的时候获取维度。

Answer 2

听起来您可能在页面中的图像仍在加载时获取了高度，因此页面仍在扩展。

在这种情况下，请尝试获取 $(window).load(fn) 事件下的高度，因为所有图像都应在该点加载。

$(document).height() 在刷新时随机化值（Safari 5.1.10）

$(document).height() randomizes value on refresh (Safari 5.1.10)

html

javascript

css

safari

jquery