【发布时间】：2014-02-14 16:31:16
【问题描述】：
我正在尝试创建 web 应用程序的整体布局。该应用程序是全屏的，具有固定的标题和三列/窗格。中间窗格由两行组成：
应该通过用鼠标拖动窗格边缘来调整窗格的大小（参见上图中的箭头）。
各个窗格应具有垂直滚动条以防内容溢出，即没有全局浏览器窗口滚动条。
使用 jQuery 和 jQuery UI Resizable，我创建了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 布局插件，但据我所知，它并没有提供我所追求的布局。另外，我想让它尽可能简单。
此外，我尝试过 Methvins 分离器插件，但无法正常工作。
我的问题：
关于如何从 jQuery UI Resizable 和我在 JSFiddle 中创建的图像中的布局有什么建议吗？
【问题讨论】：
标签： jquery-ui web-applications jquery-ui-resizable