为了让iframe的高度对内容自适应，给iframe标签设置一个onload事件，具体代码如下：
<div class="middle-section">
<iframe id = "test" class="sticky-header" src="" name="index" frameborder="0" width="100%" style="background-color: #fff" onload="this.height=100;"></iframe >
</div>
js代码：
//iframe高度自适应（被撑大后，根据内容缩小）
function reinitIframe(){
var iframe = document.getElementById("test");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;//取iframe中body的高度
//var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;//取文档高度，包括滚动条内容
var dHeight = 500;-- 当iframe被撑大之后，使用document.documentElement.scrollHeight获取到的文档高度，就大于body（内容）的高度，然后使用 Math.max(bHeight, dHeight)来设置当前iframe的高度时，使用的都是较大值那个，所以，将dHeight设置为固定值即可。
var height = Math.max(bHeight, dHeight);//取body和文档中较大值为iframe高度
iframe.height = height;
console.log("bHeight",bHeight);
console.log("dHeight",dHeight);
console.log(height);
}catch (ex){}
}
//定时器，每隔200毫秒，更新一次iframe的高度
window.setInterval("reinitIframe()", 200);
ps : 若iframe高度自适应后，页面底部存在空白区域，只要将main-content的min-height值改小一点即可。
例如：
