iframe 100% 高度不适用

Posted 2023-03-06

【中文标题】iframe 100% 高度不适用

【英文标题】：iframe 100% height not applying

【发布时间】：2012-07-09 22:43:59

【问题描述】：

我有一个带有母版页的网站，而我唯一想要的一页是这样的：

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server" style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://mylink" frameborder="0" style="overflow:hidden;height:100%;width:100%"  ></iframe>
</asp:Content>

iframe 的宽度确实扩展到屏幕的宽度，但高度始终约为 100 像素，即使它应该接近 1050。

浏览器 IE9。如何解决身高问题？

【参考方案1】：

只有在父元素已经应用了特定高度时，才能对元素应用 100% 的高度。

例如：

<div style="height:500px">
  <iframe style="height:100%;">I am 500px too!</iframe>
</div>

如果您的目标是让 iframe 占据视口的宽度和高度，则需要在样式表中设置以下内容：

html, body  height: 100%; 

您还需要为 iframe 的所有祖先元素添加 100% 的高度。因此，如果它是 5 <div>s 深，则每个 div 都需要 100% 的高度。 编辑：至少在 Chrome 中似乎不是这种情况。尽管至少有一个祖先元素确实需要一个特定的高度集。

编辑：这里以 jsfiddle 链接为例：http://jsfiddle.net/V3rLE/

HTML 是：

<div style="height:100%">
<iframe style="width:100%;height:100%;border:0" src="http://jsfiddle.net"></iframe>
</div>​

CSS 是：

html, body  height: 100%; 
iframe  display: block; 

【讨论】：

已尝试将.page、body、html 设置为100%，没有。如果我将它设置为预定义的大小像素，它工作正常，但重点是为不同的分辨率获取屏幕的高度。并且由于某种原因以下内容不起作用：<asp:HiddenField ID="hfScreenWidth" runat="server" /> <script type="text/javascript" language="javascript"> /*Send the current screen resolution width to the C# code*/ $(function () $('#<%= hfScreenWidth.ClientID %>').val(screen.width); ); 好吧 screen.width 是正确的，但隐藏字段始终为空。

在 iframe 和 body 和 html 元素之间是否可能有一个元素设置了特定的高度，或者可能有一些其他 CSS 属性（如浮动）可能导致浏览器计算高度不同？我会使用 Chrome 开发者工具（或其他浏览器中的等效工具）来检查每个祖先元素并使用 CSS 属性，直到你弄清楚发生了什么。此外，请确保您处于具有正确 DOCTYPE 的标准模式，因为 Quirks 模式可能会导致不同的行为。

是的，我现在只是手动设置它，稍后再返回。

【参考方案2】：

如果你想设置 height=100% 。它将作为内容高度...假设您只有一个 gridview.consider gridview height as 200px ..页面高度也只有 200px ...所以尝试使用 height in像素。