改变iframe的高度，而不是外部容器的高度，这样就不用硬编码了，代码更通用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
</title>
</head>
<body>
<script>
function fixSize(iframeId) {
var iframe = document.getElementById(iframeId);
iframe.style.height = '99%';
iframe.scrollWidth;
iframe.style.height = '100%';
}
</script>
<input type="button" value="页面二" onclick="document.getElementById('frame1').style.display = 'block'; document.getElementById('frame2').style.display = 'none'; fixSize('frame1');" />
<input type="button" value="页面三" onclick="document.getElementById('frame1').style.display = 'none'; document.getElementById('frame2').style.display = 'block'; fixSize('frame2');" />
<div style="border:solid 1px red;width:400px;height:200px;" id="container1">
<iframe id="frame1" style="width:100%;height:100%;border:none;" src="./page2.html"></iframe>
<iframe id="frame2" style="width:100%;height:100%;border:none;display:none;" src="./page3.html"></iframe>
</div>
</body>
</html>转载出自： https://my.oschina.net/iamsanshi/blog/801252