使用resizable.js时调整iframe的大小

Question

我正在使用resizable.js文件来分割网页。我使用<div></div>时工作正常但是当我将<iframe>放在<div>标记内时，分割器无法正常工作。我分享了CSS JS和Html代码。

附上CSS代码，HTML和JS代码。

这里我将网页分为三部分。每个部分都有一个我在<div>标记内定义的iframe。这里每个部分都有一个用于调整iframe大小的拆分器。但是当我使用iframe时它无法正常工作;否则它工作正常。
请建议我为什么它不能与iframe一起使用。

/* horizontal panel*/

.panel-container {
  display: flex;
   flex: 1 1   auto;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
  height:100%;

  /* avoid browser level touch actions */
  touch-action: none;
}

.panel-left {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 0px;
  width: 200px;

  white-space: nowrap;
  /*background: #838383;*/
  background: #eee;
  color: white;
}

.splitter {
  flex: 0 0 auto;
  width: 10px;  

  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 500px;
  cursor: col-resize; 
    z-index: 20000; 
}

.panel-right {
  flex: 1 1  auto;
  /* resizable */
  padding: 0px;
  width: 0px;

  white-space: nowrap;
  background: #eee;
}


.panel-container-vertical {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid silver;
  overflow: hidden;
  background: #eee;
}



.splitter-horizontal {
  flex: 0 0 auto;
  height: 10px;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #535353;
  cursor: row-resize;
   z-index: 20000; 
}
.panel-top {
  flex: 1 1  auto;
  /* only manually resize */
  padding: 10px;
  height: 150px;
  width: 100%;
  white-space: nowrap;
  /*background: #838383;*/
  background: #eee;
  /*color: white;*/
}

.panel-bottom {
  flex: 1 1 auto;
  /*resizable*/ 

  padding: 0px;
  width: 100%;
  background: #eee;


}


.panel-containerFor2Pane {
   display: flex;
   flex: 1 1   auto;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;

  /* avoid browser level touch actions */
  touch-action: none;
}
.panel-leftFor2Pane {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 0px;
  width: 200px;

  white-space: nowrap;
  /*background: #838383;*/
  background: #eee;
  color: white;
}
.splitterFor2Pane {
  flex: 0 0 auto;
  width: 10px;  

  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 500px;
  cursor: col-resize; 
   z-index: 20000;  
}
.panel-rightFor2Pane {
  flex: 1 1  auto;
  /* resizable */
  padding: 0px;
  width: 0px;

  white-space: nowrap;
  background: #eee;
}
/* 2 Palnel in Vertical format*/
.panel-containerFor2PaneVertical {
  display: flex;

  flex-direction: column;
  border: 1px solid silver;
  overflow: hidden;

  /* avoid browser level touch actions */
  touch-action: none;
}
.panel-topFor2PaneVertical {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 10px;
  height: 150px;
  width: 100%;
  white-space: nowrap;
  /*background: #838383;*/
  background: #eee;
  color: white;
}
.splitterFor2PaneVertical {
  flex: 0 0 auto;
  height: 10px;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #535353;
  cursor: row-resize;
}
.panel-bottomFor2PaneVertical {
  flex: 1 1  auto;
  /* resizable */
  padding: 0px;
  width: 0px;

  white-space: nowrap;
  background: #eee;
}
/*3 Pane in Reverse */


.panel-containerRev {
  display: flex;
   flex: 1 1   auto;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
  height:100%;

  /* avoid browser level touch actions */
  touch-action: none;
}

.panel-leftRev {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 0px;
  width: 200px;

  white-space: nowrap;
  /*background: #838383;*/
  background: #eee;
  color: white;
}

.splitterRev {
  flex: 0 0 auto;
  width: 10px;  

  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 500px;
  cursor: col-resize; 
   z-index: 20000;  
}

.panel-rightRev {
  flex: 1 1  auto;
  /* resizable */
  padding: 0px;
  width: 0px;

  white-space: nowrap;
  background: #eee;
}



/*CSS For 4 Pane*/

.panel-containerTop {
  display: flex;
   flex: 1 1   auto;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
  height:100%;

  /* avoid browser level touch actions */
  touch-action: none;
}

.panel-left4Pane {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 0px;
  width: 200px;

  white-space: nowrap;
  /*background: #838383;*/
  background: #eee;
  color: white;
}

.splitter4Pane {
  flex: 0 0 auto;
  width: 10px;  

  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 500px;
  cursor: col-resize;  
}

.panel-right4Pan {
  flex: 1 1  auto;
  /* resizable */
  padding: 0px;
  width: 0px;

  white-space: nowrap;
  background: #eee;
}

.splitter-horizontal4Pane {
  flex: 0 0 auto;
  height: 10px;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #535353;
  cursor: row-resize;
}

.panel-containerBottom {
  display: flex;
   flex: 1 1   auto;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
  height:100%;

  /* avoid browser level touch actions */
  touch-action: none;
}

.panel-left4PaneBottom {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 0px;
  width: 200px;

  white-space: nowrap;
  /*background: #838383;*/
  background: #eee;
  color: white;
}

.splitter4PaneBottom {
  flex: 0 0 auto;
  width: 10px;  

  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
  min-height: 500px;
  cursor: col-resize; 
   z-index: 20000;  
}

.panel-right4PaneBottom {
  flex: 1 1  auto;
  /* resizable */
  padding: 0px;
  width: 0px;

  white-space: nowrap;
  background: #eee;
}


.splitter-horizontalRev {
  flex: 0 0 auto;
  height: 10px;
  background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #535353;
  cursor: row-resize;
   z-index: 20000; 
}

HTML And JS Code

    <link href="style/split.css" rel="stylesheet" />
<script src="script/jquery.min.js"></script>
<script src="script/jquery-resizable.js"></script>

<link href="style/bootstrap.min.css" rel="stylesheet" />

<script type="text/javascript">

    setTimeout(function () {

        $(".panel-left").resizable({
            handleSelector: ".splitter",
            resizeHeight: false

        }, 500);

        $(".panel-container").resizable({
            handleSelector: ".splitter-horizontal",
            resizeHeight: true,
            resizeWidth: false


        }, 500);


        $(".panel-leftFor2Pane").resizable({
            handleSelector: ".splitterFor2Pane",
            resizeHeight: false

        }, 500);
        $(".panel-topFor2PaneVertical").resizable({
            handleSelector: ".splitterFor2PaneVertical",
            resizeWidth: false
        });

        $(".panel-leftRev").resizable({
            handleSelector: ".splitterRev",
            resizeHeight: false

        }, 500);

        $(".panel-top").resizable({
            handleSelector: ".splitter-horizontalRev",
            resizeHeight: true,
            resizeWidth: false


        }, 500);

        $(".panel-container-verticalRev").resizable({
            handleSelector: ".splitter-horizontalRev",
            resizeHeight: true,
            resizeWidth: false

        }, 500);

        $(".panel-left4Pane").resizable({
            handleSelector: ".splitter4Pane",
            resizeHeight: false

        }, 500);

        $(".panel-left4PaneBottom").resizable({
            handleSelector: ".splitter4PaneBottom",
            resizeHeight: false

        }, 500);

        $(".panel-containerTop").resizable({
            handleSelector: ".splitter-horizontal4Pane",
            resizeHeight: true,
            resizeWidth: false


        }, 500);
        //$(".panel-containerRev").resizable({
        //    handleSelector: ".splitter-horizontalRev",
        //    resizeHeight: true,
        //    resizeWidth: false

        //}, 500);




    });

    $(document).ready(function () {

        var iframe = document.getElementById('fCal');
        var iframe1 = document.getElementById('Iframe1');
        var iframe2 = document.getElementById('Iframe2');





    });




</script>



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Splitter</title>
  <%-- <style>
       html, body {height:100%;width:100%;overflow:hidden}
   </style>--%>


</head>
<body>
    <form id="form1" runat="server">

        <div id="div3Pane" style="display: inline;">
            <div class="panel-container" id="div1">

                <div class="panel-left" id="divLeft">


                        <iframe runat="server" id="fCal" frameborder="0" width="100%" height="100%"  src="Default.aspx" ></iframe>


                </div>

                <div class="splitter" id="divSplit">
                </div>

                <div class="panel-right" id="divRight">



                        <iframe runat="server" id="Iframe1" frameborder="0" width="100%"  height="100%"  src="Default.aspx"></iframe>




                </div>

            </div>

            <div class="splitter-horizontal" id="divSplithorizental">
            </div>

            <div class="panel-container-vertical" id="divVertical">

                <div class="panel-bottom" id="divBottom">




                        <iframe runat="server" id="Iframe2" frameborder="0" width="100%" height="100%"  src="Default.aspx"></iframe>



                </div>
            </div>

        </div>