Css Div标记和iframe

我正在寻找一种方法，使内容

div

在单击

iframe

时可展开，以正确显示

iframe

内容，代码为：

<div id="content">
  <div id='outerdiv'>
    <iframe src="http://mywebsite.com" id='inneriframe' scrolling="no"></iframe>
  </div>
</div><!-- end of content -->

---

如果您有任何建议，我们将不胜感激。

首先，我们必须清理您的CSS代码：

#iframe{
    position: absolute;
    width: 100px;
    height: 100px;
}

现在我们必须在Jquery中编写一些：

var iframeDoc = $('#iframe').contents().get(0);

var start = "big";
$(iframeDoc).bind('click', function( event ) {
    if(start == "big"){
        $("#iframe").animate({width:"100%", height:"100%"}, 1000);
        return start = "small";
    } else if(start == "small") {
        $("#iframe").animate({width:"100px",height:"100px"},1000);
        return start = "big";
    }
});

使用：

---

jsiddle:

为什么不使用宽度：100%；和高度：100%至iframe

var iframeDoc = $('#iframe').contents().get(0);

var start = "big";
$(iframeDoc).bind('click', function( event ) {
    if(start == "big"){
        $("#iframe").animate({width:"100%", height:"100%"}, 1000);
        return start = "small";
    } else if(start == "small") {
        $("#iframe").animate({width:"100px",height:"100px"},1000);
        return start = "big";
    }
});

<iframe id="iframe" src=""></iframe>