潜水容器内的Iframe，作为窗口模态

Question

>我创建了css/jquery调整大小窗口，在css中由标题，容器和页脚组成3部分，在此窗口的容器内，我插入iframe，并且所有窗口都可以从右下角调整大小

接下来的问题是：

如果页脚在相对位置使用div，问题是它的容器没有同时展开，当调整大小页脚看不到或他的高度降低时，它会减少

另一方面，如果对页脚使用绝对位置，则来自 iframe 的滚动条隐藏在此div 下

我尝试了CSS中的各种组合，但我找不到任何解决方案

我为人们创建Jsfiddle可以看到这一点：

https://jsfiddle.net/8t5a0wcf/20/

而代码是下一个：

<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"t></script>
<div id="win_container_gen">
<div id="win_title"></div>
<div id="win_container">
<iframe src="http://famouspoetsandpoems.com" id="iframe"  scrolling="yes" frameborder="0"></iframe>iframe>
</div>

<div id="win_footer"></div>

</div>

.CSS：

#win_container_gen
{
position:relative;
width:350px;
height:400px;
margin:auto;
border:4px soli #111;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 7px 4px 17px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 7px 4px 17px -8px rgba(0,0,0,0.75);
box-shadow: 7px 4px 17px -8px rgba(0,0,0,0.75);
overflow:hidden;
}
#win_title
{
position:relative;
width:100%;
height:35px;
line-height:35px;
margin:auto;
font-family:Arial;
font-size:14px;
color:#fff;
padding-left:1%;
background-color:#111;
}
#win_container
{
display:block;
position:relative;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
border:1px solid;
background-color:#eee;
overflow:auto;
}

#win_footer
{
position:absolute;
width:100%;
height:40px;
line-height:40px;
cursor: nwse-resize;
background-color:grey;
bottom:0px;
}
#iframe
{
display:block;
width:100%;
height:100%;
}

j查询调整大小

jQuery(document).ready(function() {
jQuery("#win_container_gen").resizable
({
handleSelector: "#win_footer"
});
});

提前感谢，最好的问候

Answer 1

编辑

正如OP指出的那样，下面的方法并不能满足他的需求。

改变的方法：https://codepen.io/ajzk/pen/RJJZOO

---

从您的 friddle 中删除拼写错误 (</iframe>iframe>( 似乎可以解决问题，滚动条没有显示。

jQuery(document).ready(function() {
jQuery("#win_container_gen").resizable
({
handleSelector: "#win_footer"
});
});

#win_container_gen {
position:relative;
width:350px;
height:400px;
margin:auto;
border:4px soli #111;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 7px 4px 17px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 7px 4px 17px -8px rgba(0,0,0,0.75);
box-shadow: 7px 4px 17px -8px rgba(0,0,0,0.75);
overflow:hidden;
}
#win_title {
position:relative;
width:100%;
height:35px;
line-height:35px;
margin:auto;
font-family:Arial;
font-size:14px;
color:#fff;
padding-left:1%;
background-color:#111;
}
#win_container {
display:block;
position:relative;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
border:1px solid;
background-color:#eee;
overflow:auto;
}
#win_footer {
position:absolute;
width:100%;
height:40px;
line-height:40px;
cursor: nwse-resize;
background-color:grey;
bottom:0;
}
#iframe {
display:block;
width:100%;
height:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"t></script>
<div id="win_container_gen">
<div id="win_title"></div>
<div id="win_container">
<iframe src="http://famouspoetsandpoems.com/" id="iframe"  scrolling="yes" frameborder="0"></iframe>
</div>
<div id="win_footer"></div>
</div>
<iframe width="560" height="315" src="http://www.youtube.com/embed/NlOF03DUoWc" frameborder="0" allowfullscreen></iframe>
llll