title: iFrame in Bootstrap will not take up 100% of height
body: <p>I am having an interesting issue with iFrames in Bootstrap.</p>
  
  <p>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….</p>
  
  <p>Any ideas?</p>
  
  <p>-------Code Edit--------</p>
  
  <pre><code> &lt;div class="main-display-area"&gt;
      &lt;div class="col-md-2"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;
                      Course Title
                  &lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;div class="list-group"&gt;
                      &lt;a href="/subjects/english/" class="list-group-item"&gt;English&lt;/a&gt; &lt;a href="/subjects/mathematics/" class="list-group-item"&gt;Mathematics&lt;/a&gt; &lt;a href="/subjects/science/" class="list-group-item"&gt;Science&lt;/a&gt; &lt;a href="/subjects/social-studies/" class="list-group-item"&gt;Social Studies&lt;/a&gt; &lt;a href="/subjects/hle/" class="list-group-item"&gt;Healthful Living Education&lt;/a&gt; &lt;a href="/subjects/arts/dance/" class="list-group-item dropdown"&gt;Dance&lt;/a&gt; &lt;a href="/subjects/arts/theatre-arts/" class="list-group-item dropdown"&gt;Theatre Arts&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--&lt;iframe src='subject.html' id="subject" name='subject' width="100%" height="100%" seamless="seamless" frameborder="1" align="left"&gt;&lt;/iframe&gt;--&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;r
          &lt;!--&lt;iframe src="subject.html" height="100%" seamless="seamless"&gt;&lt;/iframe&gt;--&gt;
          &lt;!--&lt;iframe src='index.html' id="course" class="iframe" name='course' width="100%" height="100%" seamless="seamless" frameborder="1" align="left"&gt;&lt;/iframe&gt;--&gt;
      &lt;/div&gt;
      &lt;div class="col-md-7"&gt;
          &lt;iframe src='index.html' id="info" class="iframe" name='info' width="100%" height="100%" seamless="seamless" align="left"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>The commented-out iFrames were the iFrames that I was playing around with trying to fix my issue.</p>