jquery - div 容器内的 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%;
}

jQuery 调整大小

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