【问题标题】：iFrame in Bootstrap will not take up 100% of heightBootstrap 中的 iFrame 不会占用 100% 的高度
【发布时间】：2013-12-03 17:40:11
【问题描述】：

我在 Bootstrap 中遇到了一个有趣的 iFrame 问题。

我有一个 3 列网格，每列都定义了一个 iFrame。然而，iFrame 只使用了 150px 的高度，我终其一生都无法弄清楚原因，也无法通过编辑 iFrame 的 height 属性或使用 CSS 来更改它……

有什么想法吗？

-------代码编辑--------

 <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>

注释掉的 iFrame 是我试图解决问题的 iFrame。

【问题讨论】：

我已经添加了代码。

标签： html css twitter-bootstrap iframe

【解决方案1】：

iframe 及其任何容器的高度必须为 100%..

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

Bootply

【讨论】：

【解决方案2】：

尝试将 HTML 和正文设置为 100%。

 html, body { height: 100% }

基本上，iframe 之外的元素需要有一个设定的高度。您可能还必须在列上手动设置高度。使用min-height 让元素展开。

我过去也使用媒体查询将 iframe 高度设置为多个设备尺寸的特定高度。不是最好的方式，但如果一切都失败了。

【讨论】：