Javascript iFrame位于引导页面上，宽度和高度均适合100%

我们正在使用一个测验制作应用程序，因此我们将该测验应用程序网页嵌入到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>

&抄袭；2014 rtyrt rty rtyrtcghLLC。

这一款有几种方法可以尝试：