代码块

iframe高度自适应浏览器窗口大小

<div class="navbar navbar-custom" style="background-color:red;background-size: cover;background-repeat:repeat-x\9;height:140px;border-bottom: 4px solid #03A9F4;">
 </div>
<iframe src="https://www.sina.com.cn" frameborder="0" scrolling="no" width="100%" height="500px" id="external-frame" onload="setIframeHeight(this)"></iframe>

<div style="background-color:red;">
    底部
</div>


<script type="text/javascript">
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.getElementById("external-frame").style.height = (winHeight -200) + 'px';
//alert(winHeight);
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions;
//-->
</script>