0

We are using a Quiz maker application and so we are embedding that quiz application web page on our ASPX page in an iframe. Our page using using boostrap. Here is the page now looks like

enter image description here

As you can see the iframe unfortunately to fit to the width and height of the window. We cant specify a height in pixels since we wants this to be responsive to the window dimension. As I pointed using the arrow there is some good space remaiing on the page to fit the iframe. Also I dont want to have any scroll bars on the page. So how can I make that iFrame fit perfectly to the page.

Am sharing the HTML markup

<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>
Siguza
  • 21,155
  • 6
  • 52
  • 89
Sandeep Thomas
  • 4,303
  • 14
  • 61
  • 132
  • http://stackoverflow.com/questions/3582295/why-this-iframe-is-not-taking-complete-page-height – Dreamweaver Jun 23 '15 at 06:58
  • This one have few approaches you can give a try: http://stackoverflow.com/questions/325273/make-iframe-to-fit-100-of-containers-remaining-height/27914781#27914781 – Dreamweaver Jun 23 '15 at 07:03

0 Answers0