javascript - 将 div margin-top 设置为屏幕高度(在 iframe 内，跨浏览器)

Question

我正在尝试将 div margin-top 设置为屏幕高度的 100%，但是因为它在 iframe 中 - jQuery 不会无效(返回 0 或不准确的值)。

使用 CSS3 的 100vh 是一种选择，但在一些较旧的和移动浏览器中不受支持。

还有其他解决方案吗？

编辑:

忘了说 - 我只会使用 JavaScript、HTML 和 CSS。

编辑2:

这是一个演示 CodePen

编辑3:

当我在 CodePen 上测试我的代码时 - 结果证明我可以使用 JQuery 获取屏幕高度。那么问题出在哪里呢？

首先我必须提到我在 Tumblr 上使用这段代码，所以它一定是 Tumblr 特有的问题。对于那些不熟悉他们的自定义页面的人来说，它看起来像这样

出于某些我不知道的原因，每当我尝试使用 Jquery 从用户那里获取与浏览器相关的内容时，它总是从“实际页面”而不是从右侧的预览 (iFrame) 获取该信息。那是一些错误的设计。为什么？因为在实际的博客页面上一切正常。

这是我发现的目前有效的解决方法，但我不确定原因。

我使用 $(document).ready 将 JQuery 提供给最终产品(实际的博客页面)——这在自定义页面上不会也不起作用。但是，如果我将相同的代码包装在 $(window).resize 中并仅在自定义页面上提供它，它也可以在那里工作。

有人知道为什么会这样吗？

Answer 1

iframe 的 HTML 文件中的 CSS 怎么样:

html, 
body {
   height: 100%;
}
div {
    margin-top: 100%;
}