如何制作IFrame填充屏幕宽度

Question

我在ASP.NET Web Forms网站上有一个页面，我在其中加载了一个或两个IFrame。一个在左边，一个在右边。如果不需要填充左侧的那个，则只需要加载右侧的那个并且是全屏大小。

这曾经有用，但自从我实现了Bootstrap网格系统后，IFrame就会加载到非常小的窗口中：

实现此不良影响的代码加载到内部row的引导col-lg-12元素中：

<div class="row">
    <div class="workflow-content col-lg-12">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
        <asp:Button ID="CloseButton" runat="server" OnClick="CloseButton_Click" 
            SkinID="WorkflowNavigation" EnableViewState="False" 
             CausesValidation="False"  Text="Close" />
    </div>
</div>

注入以下代码：

<asp:Content ContentPlaceHolderID="MainContent" ID="Main" runat="server">
    <div class="row">
        <div class="col-md-6 pull-left" id="ScanFrame" runat="server">
            <iframe name="ifrmScan" id="ifrmScan" runat="server"></iframe>
        </div>
        <div class="col-md-6 pull-right">
            <iframe name="ifrm" id="ifrm" runat="server"></iframe>
        </div>
    </div><!--row-->
</asp:Content>

以编程方式完成左侧ScanFrame仅在内容可用时加载。

所以不想要的效果是IFrame非常小，并且右边总是在右边，即使左边的那个不可用（这看起来很合乎逻辑，但是宽度不小，虽然我认为他们是相关的。）

有没有人知道我如何能够实现两个IFrame在内容都填满屏幕的一半时效果，并且右边是全屏时哪个是内容唯一的？没有必要使用Bootstrap。

Answer 1

将您的iframe宽度设置为100％。你的div是那些设置结构正确的？所以让iframe填补他们的空间。

更新：iFrames在设置尺寸方面很棘手，你可能不得不手动设置它们的高度，或者使用某种形式的jQuery来动态设置它们的尺寸。