将iframe的高度设置为屏幕大小的x％

Question

我正在使用boostrap 3，我试图在页面上嵌入一个演示文稿。它不是页面上唯一的元素。还有许多其他行上述&下面这个样子：

<div class="row"> 
<div id="iframecontainter" class="col-lg-6 col-md-6 col-sm-offset-1 col-md-offset-1"> 
<iframe src="http://docs.google.com/gview?url=http://example.com/presenation.ppt&embedded=true" frameborder="0"></iframe> 
</div> <!-- #iframecontainter --> 
</div> <!-- .row --> 

& CSS：

iframe{ 
width:100% 
} 

上面的代码，为照顾宽度，因为我想要的。但它是导致问题的高度。有没有一种方法可以设置高度：可用屏幕尺寸的百分比？或者其他解决方案是什么？

Answer 1

试试这个 -

html, body{ height: 100%; } 
.row, #iframecontainter{height: 100%; } 
iframe{ 
    height:80%; border: 1px solid red; 
} 

Fiddle

Answer 2

使用JavaScript来分配iframe标签的高度。

<script type="text/javascript"> 
function calcHeight() 
{ 
//find the height of the internal page 
var the_height= 
document.getElementById('the_iframe').contentWindow. 
document.body.scrollHeight; 
//change the height of the iframe 
document.getElementById('the_iframe').height= the_height; 
} 
</script> 
<iframe width="100%" src="./1BA3A.mht" scrolling="no" id="the_iframe" onLoad="calcHeight();" height="1px" frameborder="0" ></iframe> 

谢谢。