Question

我试过以下代码。但它没有以适当的方式显示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>

Answer 1

这是你在找什么：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%;}

Answer 2

由于您正在浮动元素#right并且没有给它任何宽度或高度，因此它将采用其内容的宽度和高度。但内容也有相对的尺寸，所以这会崩溃。

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

根据页面大小将Iframe宽度和高度设置为100％不起作用

2 个答案: