根据页面大小将 iframe 宽度和高度设置为 100% 不起作用答案

【问题标题】：Set the Iframe width and height to 100% as per page size Not working根据页面大小将 iframe 宽度和高度设置为 100% 不起作用
【发布时间】：2013-05-11 09:35:06
【问题描述】：

我尝试了以下代码。但它没有以正确的方式显示 iframe。 iframe 的高度和宽度非常小。 iframe 应根据页面大小采用高度和宽度。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #left {
            float: left;            
        }

        #right {
            float: left;           
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div >
            <div id="left">
                <asp:Button runat="server" ID="b1" OnClick="b1_Click" Text="Click" />
            </div>
            <div id="right">
                <iframe id="ifr1" runat="server" style="width: 100%; height: 100%" />
            </div>
        </div>
    </form>
</body>
</html>

【问题讨论】：

您的 html 和 body 标签也需要 100% 的高度，或者 iframe 的父标签之一设置高度
我将 body 和 div 标签的高度和宽度设置为 100%。仍然没有以正确的方式显示。
您想要多大的 iframe - 如果您为 #right 指定特定尺寸，那么您的 iframe 将占据该宽度和高度。
我不想给 iframe 提供特定的宽度和高度。高度和宽度应根据页面大小应用，因此我为 iframe 提供了 100% 的高度和宽度。
在这种情况下，您不需要向左或向右浮动：jsfiddle.net/jFVsr/4。我唯一想说的是，当您离开时，iframe 的 100% 高度将溢出视口

标签： html asp.net css iframe

【解决方案1】：

由于您浮动元素#right 并且没有给它任何宽度或高度，它将占用其内容的宽度和高度。但是内容也有相对尺寸，所以这会折叠。

相对高度和宽度总是指相对于父元素，所以给父元素一个具体的高度和宽度。

【讨论】：

我将 body 和 div 标签的高度和宽度设置为 100%。它仍然没有以正确的方式显示。我不想在 px 中给出高度和宽度

【解决方案2】：

这是你要找的吗：http://jsfiddle.net/David_Knowles/jFVsr/

html, body {height: 100%; width: 100%; padding: 0; margin: 0; background-color: red;}

编辑：现在 iframe 填满了整个屏幕。

#left {float: left; width: 100%;}
#right {float: left; width: 100%;}
#form1 {background-color: beige; overflow:hidden; height: 100%;}
#ifr1 {border:none; height: 100%;}

【讨论】：

我试过上面的代码。 iframe 正在获取整页的高度，它仅在 chrome 中有效，但在 IE 和 firefox 中高度很小，另一个查询，为什么 iframe 不将页面的剩余空间作为宽度。
再看看。我想这就是你需要的不是吗？