Bootstrap中的iFrame不會占用100％的高度

Question

我在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是iFrames，我正試圖解決我的問題。

Answer 1

iframe及其任何容器必須是100％高度..

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

Bootply

Answer 2

嘗試將HTML和正文設置為100％。

 html, body { height: 100% }

基本上，iframe外部的元素需要具有設定的高度。 您可能還必須在列上手動設置高度。 使用min-height讓元素展開。

我過去也使用媒體查詢將iframe高度設置為多個設備大小的特定高度。 不是節拍方式，但如果一切都失敗了。