iFrame in Bootstrap will not take up 100% of height

Question

I am having an interesting issue with iFrames in Bootstrap.

I have a 3 columns grid, each column has an iFrame defined within it. The iFrame however, only uses up a 150px height and I cannot for the life of me figure out why, nor can I change it by editing the height property of the iFrame, or by using CSS….

Any ideas?

-------Code Edit--------

 <div class="main-display-area">
    <div class="col-md-2">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Course Title
                </h3>
            </div>
            <div class="panel-body">
                <div class="list-group">
                    <a href="/subjects/english/" class="list-group-item">English</a> <a href="/subjects/mathematics/" class="list-group-item">Mathematics</a> <a href="/subjects/science/" class="list-group-item">Science</a> <a href="/subjects/social-studies/" class="list-group-item">Social Studies</a> <a href="/subjects/hle/" class="list-group-item">Healthful Living Education</a> <a href="/subjects/arts/dance/" class="list-group-item dropdown">Dance</a> <a href="/subjects/arts/theatre-arts/" class="list-group-item dropdown">Theatre Arts</a>
                </div>
            </div>
        </div>
        <!--<iframe src='subject.html' id="subject" name='subject' width="100%" height="100%" seamless="seamless" frameborder="1" align="left"></iframe>-->
    </div>
    <div class="col-md-3">r
        <!--<iframe src="subject.html" height="100%" seamless="seamless"></iframe>-->
        <!--<iframe src='index.html' id="course" class="iframe" name='course' width="100%" height="100%" seamless="seamless" frameborder="1" align="left"></iframe>-->
    </div>
    <div class="col-md-7">
        <iframe src='index.html' id="info" class="iframe" name='info' width="100%" height="100%" seamless="seamless" align="left"></iframe>
    </div>
 </div>

The commented-out iFrames were the iFrames that I was playing around with trying to fix my issue.

Answer 1

The iframe, and any of it's containers must be 100% height..

body,html,.main-display-area,.col-md-7 {
   height:100%;
}

Bootply

Answer 2

Try setting the HTML and body to 100%.

 html, body { height: 100% }

Basically the element outside the iframe needs to have a set height. You might have to set the height manually on the columns too. Use min-height to let the element expand.

I have also in the past set the iframe height to a specific height for multiple devices sizes using media queries. Not the beat way but if all else fails.