Question

我有一个asp.net Web应用程序，我有一个标题，下面是一个IFrame （宽度：100％高度：100％这里宽度工作高度不起作用）如果我把尺寸与％它不起作用，但如果我把一个固定的尺寸放在px或pt或任何东西，它的工作原理...... 有没有办法在％

中设置高度和宽度

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="iframeimplementation.aspx.cs"
    Inherits="iframeimplementation" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        #top
        {
            width: 100%;
            height: 100%;
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 0px 0px;
            vertical-align: top;
            border: 0px;
            background-color: Black;
            background-color: transparent;
        }
        #Covenantmenu
        {
            width: 100%;
            font-size: 90%;
        }
        #Covenantmenu:after
        {
            /*Add margin between menu and rest of content in Firefox*/
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        #Covenantmenu ul
        {
            border: 0px solid #BBB;
            width: 100%;
            background: url(Images/MenuTop.png) repeat-x;
            padding: 5px 0;
            margin: 0;
            text-align: right;
            vertical-align: middle;
        }
        #Covenantmenu ul li
        {
            display: inline;
        }
        #Covenantmenu ul li a
        {
            color: White;
            padding: 5px;
            margin: 1;
            text-decoration: none;
            border-right-width: thin;
            border-right-color: Gray;
            border-right-style: inset;
        }
        #Covenantmenu ul li a:hover
        {
            color: Black;
            background: url(Images/MenuHover.png) repeat-x;
        }
        #Gradianbar
        {
            width: 100%;
            font-size: 90%;
        }
        #Gradianbar ul
        {
            border: 0px solid #BBB;
            width: 100%;
            background: url(Images/Mainback1.png) repeat-x;
            padding: 5px 0;
            margin: 0;
            text-align: right;
            vertical-align: middle;
            height: 1px;
        }
        .Grid
        {
            position: relative;
            height: 100%;
            width: 100%;
            font-size: smaller;
            font-family: Arial;
            font-style: normal;
            font-weight: normal;
            top: 0px;
            left: 0px;
            text-align: center;
        }
        #I1
        {
            height: 100%;
        }
        iframe
        {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <form id="form2" runat="server">
    <div style="background-image: url('Images/MainBack.png'); background-repeat: repeat">
        <table border="0">
            <tr>
                <td colspan="2">
                    <div id="Div1">
                        <div>
                            <asp:Image ID="Image4" Width="100%" ImageUrl="~/Images/Head_Banner.png" runat="server" />
                        </div>
                        <div id="Div2">
                            <ul>
                                <li><a href="">Inspection</a></li>
                                <li><a href="">Reports</a></li>
                                <li><a href="">Help Desk</a></li>
                                <li><a href="">User Configuration</a></li>
                                <li><a href="">System Configuration</a></li>
                            </ul>
                        </div>
                        <div id="Div3">
                            <ul>
                            </ul>
                        </div>
                    </div>
                </td>
            </tr>
            <tr style="background-image: url('Images/MainBack.png'); background-repeat: repeat">
                <td width="15%">
                    <div style="width: 90%; height: 100%; background-image: url('Images/MainBack.png');"
                        align="center">
                        <div style="margin: 0px auto;">
                            <asp:Panel ID="Panel4" runat="server" Height="100%" Width="90%" HorizontalAlign="Center">
                                <asp:Image ID="Image5" ImageUrl="~/Images/PanelTop.png" Width="100%" Height="40px"
                                    runat="server" />
                                <asp:DetailsView ID="DetailsView4" RowStyle-Wrap="true" runat="server" CssClass="Grid"
                                    BackColor="White" GridLines="None">
                                </asp:DetailsView>
                            </asp:Panel>
                        </div>
                        <br />
                        <br />
                        <div style="width: 100%; height: 100%; margin: 0px auto;">
                            <asp:Panel ID="Panel5" runat="server" Height="100%" Width="90%">
                                <asp:Image ID="Image6" ImageUrl="~/Images/PanelTop.png" Width="100%" Height="40px"
                                    runat="server" />
                                <asp:DetailsView ID="DetailsView5" RowStyle-Wrap="true" runat="server" CssClass="Grid"
                                    BackColor="White" GridLines="None">
                                </asp:DetailsView>
                            </asp:Panel>
                        </div>
                        <br />
                        <br />
                        <div style="width: 100%; height: 100%; margin: 0px auto;">
                            <asp:Panel ID="Panel6" runat="server" Height="100%" Width="90%">
                                <asp:Image ID="Image7" ImageUrl="~/Images/PanelTop.png" Width="100%" Height="40px"
                                    runat="server" />
                                <asp:DetailsView ID="DetailsView6" RowStyle-Wrap="true" runat="server" CssClass="Grid"
                                    BackColor="White" GridLines="None">
                                </asp:DetailsView>
                            </asp:Panel>
                        </div>
                    </div>
                </td>
                <td width="85%" valign="top" align="left">
                    <iframe id="Iframe1" src="AdvancedSearch.aspx" runat="server" scrolling="no"></iframe>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Answer 1

似乎为我工作

<style>
    iframe{
        height: 50%;
        width: 50%;
        }
</style>
<iframe src="http://google.com"></iframe>

screen shot

我们可以设置IFrame高度和宽度（％）

1 个答案: