引导页面上的iFrame适合100％的宽度和高度

Question

我们正在使用Quiz maker应用程序，因此我们将这个测验应用程序网页嵌入到iframe的ASPX页面上。我们的页面使用了boostrap。这是现在的页面

正如您可以看到iframe不幸适合窗口的宽度和高度。我们无法指定高度（以像素为单位），因为我们希望它能够响应窗口尺寸。正如我使用箭头指出的那样，页面上有一些很好的空间可以用来装入iframe。另外，我不想在页面上有任何滚动条。那么我怎样才能让iFrame完美地适应页面。

分享HTML标记

<form runat="server" id="form1">
<!-- start: HEADER -->
<!-- end: HEADER -->
<!-- start: MAIN CONTAINER -->
<div class="container">
    <div class="row text-center">
        <div class="col-lg-12">
            <asp:Image ID="img_logo" ClientIDMode="Static" ImageUrl="http://placehold.it/200x80/ffffff/000000&text=MyLogo"
                runat="server" />
        </div>
    </div>
</div>
<div class="main-container">
    <div class="page-top">
        <div class="container">
            <div class="col-md-7 col-sm-7">
                <h1>
                    <asp:Literal Text="" ID="ltr_pagetitle" runat="server" />
                    <small><i class='fa fa-arrow-right'></i>
                        <asp:Literal Text="Accept Statement" ID="ltr_subtitle" runat="server" /></small></h1>
            </div>
            <div class="col-md-5 col-sm-5">
                <ul class="pull-right breadcrumb">
                </ul>
            </div>
        </div>
    </div>
    <div class="wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                <iframe src="1/quiz.html" frameborder="0" style="width: 100%; height: 100%;"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end: MAIN CONTAINER -->
<!-- start: FOOTER -->
<div class="footer-copyright">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center col-sm-12 col-xs-12">
                <p>
                    &copy; 2014 rtyrt rty t rtyrtcghLLC.
                </p>
            </div>
        </div>
    </div>
</div>
</form>