Html Bootstrap 中的 iFrame 不会占据 100% 的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20357992/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iFrame in Bootstrap will not take up 100% of height
提问by Blake Stoddard
I am having an interesting issue with iFrames in Bootstrap.
我在 Bootstrap 中遇到了一个关于 iFrame 的有趣问题。
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….
我有一个 3 列网格，每列都定义了一个 iFrame。然而，iFrame 只使用了 150 像素的高度，我一生都无法弄清楚原因，也无法通过编辑 iFrame 的高度属性或使用 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.
注释掉的 iFrame 是我正在尝试解决我的问题的 iFrame。
回答by Zim
回答by Loran
Try setting the HTML and body to 100%.
尝试将 HTML 和正文设置为 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-heightto let the element expand.
基本上 iframe 之外的元素需要有一个设定的高度。您可能也必须在列上手动设置高度。使用min-height让元素展开。
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.
我过去还使用媒体查询将 iframe 高度设置为多个设备尺寸的特定高度。不是节拍方式，但如果所有其他方法都失败了。
