仅在 Firefox 中 Iframe 高度无法正确显示

发布于 2025-01-04 07:20:55 字数 622 浏览 2 评论 0原文

我创建了一个与 DiggBar 具有类似功能的页面(即指定高度的标题和下面填充页面其余部分的iframe)。

我不久前已经完成了这个工作,并获得了预期的结果,但突然间,iframe高度 已经从剩余的 100% 变成了页面高度仅为44.8px。问题是这种情况只发生在一种浏览器中——Ubuntu 上的 Firefox。

我认为这应该发生在所有其他浏览器中,但事实并非如此。它在 IE、FF 和 IE 中正确显示。 Windows 上的 Chrome 和 Ubuntu 上的 Chrome。

最后,使用 Firebug,我选择了 inspect element 来尝试确定发生了什么,但它只告诉我我的 height 被定义为 100%< /code>,但计算仅为44.8px

我正在寻找一些关于如何最好地调试这个问题的指导,因为我已经完全没有想法了。我认为没有必要发布产生此问题的所有代码,但如果绝对需要任何代码,请询问。

谢谢。

I have created a page that has similar functionality to that of the DiggBar (i.e. a header of specified height and an iframe below filling the rest of the page).

I had this working a while back with desired results, but all of a sudden the height of the iframe has gone from 100% of the remaining page height to only 44.8px. The catch is that this is only occurring in one browser — Firefox on Ubuntu.

I thought that this should be happening in all other browsers, but it's not. It displays correctly in IE, FF, & Chrome on Windows and Chrome on Ubuntu.

Finally, using Firebug, I have selected inspect element to try to determine what's going on, but it only tells me that my height is defined to be 100%, but that it is computed to be only 44.8px.

I am looking for some guidance as to how best to debug this issue because I have completely run out of ideas. I didn't think that it would be necessary to post all of the code that produces this problem, but if any is absolutely needed, just ask.

Thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

不打扰别人 2025-01-11 07:20:56

不幸的是,层叠样式表的层叠部分让我感到困惑。我有另一个(我们称之为“隐藏”)对 iframe 父级的引用,这导致了奇怪的高度计算问题。

有趣的是,这只发生在我的 Ubuntu 版本的 Firefox 中。

Unfortunately the Cascading part of the Cascading Style Sheets threw me off. I had another (let's call it 'hidden') reference to the parent of the iframe which caused the weird height calculation issue.

Funny that this only happened in my Ubuntu version of Firefox, though.

宫墨修音 2025-01-11 07:20:56

如果布局结构复杂,将所有 div 的高度设置为 100% 可能会破坏页面布局。在这种情况下,我建议使用 javascript 将 iframe 的高度设置为 100%。就我而言,我使用了 JQuery,但我相信纯 javascript DOM 函数也应该可以工作。我将 iframe 的高度设置为等于父 div 高度:

$('#doc-preview iframe').height($('#doc-preview').height());

这里 doc-preview 是 iframe 父 div 的 id。

确保在加载页面后运行此脚本。

If you have a complicated layout structure, setting height of all divs to 100% may break the page layout. In this case I recommend using javascript to set the height of iframe to 100%. In my case I used JQuery, but I believe pure javascript DOM functions should also work. I set the height of iframe equal to parent div height:

$('#doc-preview iframe').height($('#doc-preview').height());

Here the doc-preview is an id of iframe's parent div.

Make sure to run this script after the page has been loaded.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文