Question

我有一个包含母版页的网站，我在一个页面上唯一需要的是：

<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%" height="100%" width="100%"></iframe>
</asp:Content>

iframe的宽度确实扩展到了屏幕的宽度，但高度总是像100像素一样，即使它应该接近1050.

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

Answer 1

将100％的高度应用于元素仅在父元素已应用特定高度时才有效。

例如：

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

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

html, body { height: 100%; }

~~您还需要为iframe的所有祖先元素添加100％的高度。因此，如果深度为<div>，则每个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; }

Answer 2

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

iframe 100％高度不适用

2 个答案: