javascript - 如何让IFrame填充屏幕宽度

Question

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

这曾经有效，但自从我实现了 Bootstrap 网格系统后，IFrames 在非常小的窗口中加载:

实现这种不需要的效果的代码被加载到带有内部 col-lg-12 的 Bootstrap row 元素中:

<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>

注入(inject)以下代码的地方:

<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 非常小，右边总是在右边，即使左边的不可用(从 CSS 来看这是很合乎逻辑的，小宽度不是，虽然我认为它们是相关的)。

有谁知道我如何才能实现这样的效果:当两个 IFrame 都有内容时，它们会填满屏幕的一半，而当只有它有内容时，右侧是全屏？无需使用 Bootstrap。

Answer 1

将您的 iframe 宽度设置为 100%。您的 div 是设置结构正确的吗？因此，让 iframe 填充它们的空间。

更新:iFrame 在设置其尺寸时很棘手，您可能不得不求助于手动设置它们的高度，或使用某种形式的 jQuery 动态设置它们的大小。