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

我正在使用Boostrap3，我正在尝试在页面上嵌入演示文稿。它不是页面上的唯一元素。在上面和下面还有许多其他行：

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

以上代码按照我的要求处理宽度。但造成问题的是高度。有没有办法设置可用屏幕大小的高度？否则，解决方案是什么？

试试这个-

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

---

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

函数calcHeight（）
{
//查找内部页面的高度
var_高度=
document.getElementById（'the_iframe'）.contentWindow。
document.body.scrollHeight；
//更改iframe的高度
document.getElementById（'the_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>