Jquery Iframe位于潜水容器内，作为窗口模式

我创建了css/jquery resize窗口，在css中有3个部分，标题、容器和页脚，在这个窗口的容器中，我插入了iframe，所有窗口都可以从右下角调整大小

问题是下一个：

<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>

#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%;
}

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

在另一侧，如果页脚使用绝对位置，则iframe中的滚动条将隐藏在此div下

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

我为人们创建了JSFIDLE，大家可以看到：

代码是下一个：

<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>

#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%;
}

jQuery调整大小

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

});

向您致以最诚挚的问候

编辑

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

改变方法：

---

从冰箱中删除输入错误（

iframe>

）似乎可以解决问题，但滚动条不会显示

jQuery（文档）.ready（函数（）{
jQuery（“#win#u container_gen”）。可调整大小
({
手选者：“赢得页脚”
});
});
#赢得(集装箱){
位置：相对位置；
宽度：350px；
高度：400px；
保证金：自动；
边界：4px soli#111；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
-网络工具包盒阴影：7px 4px 17px-8px rgba（0,0,0.75）；
-moz盒阴影：7px 4px 17px-8px rgba（0,0,0.75）；
盒影：7px 4px 17px-8px rgba（0,0,0,0.75）；
溢出：隐藏；
}
#赢得冠军{
位置：相对位置；
宽度：100%；
高度：35px；
线高：35px；
保证金：自动；
字体系列：Arial；
字体大小：14px；
颜色：#fff；
左：1%；
背景色：#111；
}
#温丘集装箱{
显示：块；
位置：相对位置；
宽度：100%；
身高：100%；
左边距：自动；
右边距：自动；
边框：1px实心；
背景色：#eee；
溢出：自动；
}
#胜利者{
位置：绝对位置；
宽度：100%；
高度：40px；
线高：40px；
光标：nwse调整大小；
背景颜色：灰色；
底部：0；
}
#iframe{
显示：块；
宽度：100%；
身高：100%；
}

llll
不明白你说的，我的问题是div中的iframe叫做win_container，因为我需要增加高度并显示iframe中的所有滚动条，当在绝对位置使用此页脚时，滚动条隐藏在gfooter下，我需要增加高度，不要在末尾隐藏滚动条。很抱歉，我一开始不理解你的问题。像这样的东西对你有好处吗？我使用了
填充
与
框尺寸：边框框
组合的
#win#u container\u gen
并模拟了高度为1000px的高iframe。