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 Resize

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

});

Спасибо заранее, с наилучшими пожеланиями

Answer 1

EDIT

Как указал OP, приведенный ниже подход не покрывает его потребности.

Измененный подход: https://codepen.io/ajzk/pen/RJJZOO

---

Удаление опечатки (</iframe>iframe>) из вашей friddle, похоже, решает проблему, полоса прокрутки не отображается.

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