仅在 Firefox 中 Iframe 高度无法正确显示
我创建了一个与 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
不幸的是,层叠样式表的层叠部分让我感到困惑。我有另一个(我们称之为“隐藏”)对 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 weirdheight
calculation issue.Funny that this only happened in my Ubuntu version of Firefox, though.
如果布局结构复杂,将所有 div 的高度设置为 100% 可能会破坏页面布局。在这种情况下,我建议使用 javascript 将 iframe 的高度设置为 100%。就我而言,我使用了 JQuery,但我相信纯 javascript DOM 函数也应该可以工作。我将 iframe 的高度设置为等于父 div 高度:
这里 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:
Here the doc-preview is an id of iframe's parent div.
Make sure to run this script after the page has been loaded.