Bootply

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高度设置为多个设备尺寸的特定高度。不是节拍方式，但如果一切都失败了。

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

2 个答案:

Bootply