怎样让iframe撑开父div的高度？

Question

$("#li1").click(function(){

$("#main-wrap").html("<iframe id='iframe1' src='index.php?action=show' name='topFrame' id='topFrame' scrolling='yes' noresize></iframe>");

}

如上代码，iframe是动态加载进#main-wrap元素的，但是由于iframe中内容的高度不确定，当高度超过 父div #main-wrap现在的高度时，下面 就不显示了。

怎样解决一下?

.

Answer 1

监听 iframe 的 事件动态设置高度呢

Answer 2

泻药, 父元素设置固定高度 然后设置overflow: auto;
iframe 设置height:100%; 这样当iframe高度超过div高度时会出现滚动条
如果需要外部div动态的改变高度以适应iframe高度,目前我想到的方法是内部iframe访问外部window对象的dom动态的设定高度
比如这样

window.parent.document.getElement('#div').style.height = document.documentElement.offsetHeight+'px';

Answer 3

谢邀~
楼上的说的很对。我再补充一点，即你对iframe的高度加一个监听事件，如果他的高度，超出父元素的高度，那么你动态的去扩展父元素的高度，扩展的时候，可以采用jquery的animation去完成(在规定的时间内完成一个特效)，这样会显得平滑一点，慢慢的张开，不会出现“嗖”的感觉。

Answer 4

话说你的iframe的高度怎么设定的。

Answer 5

function changeFrameHeight(){
var ifm= document.getElementById("iframe_content");
ifm.height=document.documentElement.clientHeight;
}
window.onResize=function(){
changeFrameHeight();
}

Answer 6

问题已经解决，问题出在我没有考虑到jq初始化过程的问题。

通过监听iframe内部某个元素的动作，然后用#('idframe的id').contents().height()取出高度，再设置到外层容器上。

这本不复杂，但是由于iframe本身也是在某元素在click的时候动态加载的，我在写高度设置的时候没有考虑到jq初始化的问题，导致明明写好觉得对的东西没有执行，花了不少时间，后来把设置写到click()片段内，就起作用了。

已经解决。谢谢各位

Answer 7

你好 我也遇到同样的问题了 楼主能不能 把代码贴出来？感谢