jquery-ui – 使用jQuery UI的可调整大小的窗格的全页面布局

应该通过用鼠标拖动窗格边缘来调整窗格的大小(参见上图中的箭头).

单个窗格应该具有垂直的滚动条,以防溢出内容,即没有全局浏览器窗口滚动条.

使用jQuery和jQuery UI可调整大小,我创建了this (partly working) JSFiddle.

HTML：

<div class="header">
  Fixed header    
</div>
<div class="wrapper">
   <div class="inner-wrapper">
       <div class="left pane">Left</div>
       <div class="center pane">
           <div class="inner">
               <div class="top">Center top</div>
               <div class="bottom">Center bottom</div>
           </div>
       </div>
       <div class="right pane">Right</div>
   </div>
</div>

CSS：

html,body {
    height: 100%;
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background-color: moccasin;  
}
.wrapper {
    position:absolute;
    top: 21px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: fuchsia;
}
.inner-wrapper,.center.pane .inner {
    display: table;
    width: 100%;
    height: 100%;
}
.pane {
    display: table-cell;
}
.left.pane {
   background-color: olivedrab; 
}
.center.pane {
    background-color: lightblue;
}
.center.pane .inner .top,.center.pane .inner .bottom{
    display: table-row;  
}
.center.pane .inner .top {
    background-color: lightcoral;   
}
.center.pane .inner .bottom {   
    background-color: orange;
    height: 100%;
    width: 100%;
}
.right.pane {
    background-color: #999;
}

JavaScript的：

$(function () {
    $(".left.pane").resizable({
        handles: "e,w"
    });
    $(".right.pane").resizable({
        handles: "e,w"
    });
    $(".center.pane .inner .bottom").resizable({
        handles: "n,s"
    });
});

它有几个问题,包括：

>当调整左侧的大小时,右还会调整大小(不应该)
>当向左大小调整为全宽时,中心内容隐藏在右侧
>当调整大小时,包装(紫红色)部分可见
>中心底部通过顶部的顶部调整大小,而不是通过自己的顶部

我知道jQuery Layout插件,但是据我所见,它并没有提供相当的布局.此外,我想保持尽可能简单.

此外,我已经尝试了Methvins拆分插件,但是无法让它工作.

我的问题：

任何建议如何创建一个布局,如图像从jQuery UI可调整大小和我在JSFiddle？