我正在创建一个具有多个窗格的 Web 应用程序。过去我用过一些Dojo，但是对于这个项目来说太重了，所以我打算用jQuery Layout来代替。
但是，我喜欢 Dojo 的 BorderContainers 允许您使用“侧边栏”设计的方式，其中东西窗格是全高的，而不是默认的全宽南北窗格。有没有办法通过 jQuery Layout 使用或模拟这种外观？
我尝试在垂直拆分布局中嵌套水平拆分布局，但布局添加了太多填充，看起来不正确：
当我设置.ui-layout-pane { padding: 0 }它时更糟：
但是，如果有更好的方法来删除填充，那也可能有效。
资源
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/lib/jquery-layout/layout-default.css"/>
<link rel="stylesheet" href="style/style.css"/>
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/jquery-ui.min.js"></script>
<script src="js/lib/jquery.layout.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="ui-layout-west"></div>
<div class="ui-layout-center">
<div class="ui-layout-center"></div>
<div class="ui-layout-south"></div>
</div>
</body>
</html>
style.css
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body > .ui-layout-pane {
padding: 0;
}
main.js
jQuery(function($) {
$("body").layout({
west: {
size: "20%",
minSize: "10%",
maxSize: "50%",
},
center: {
}
});
$("body > .ui-layout-center").layout({
center: {
},
south: {
size: "10%"
}
});
});
开发控制台样式
element.style {
position: absolute;
margin: 0px;
left: 215px;
right: 0px;
top: 0px;
bottom: 0px;
height: 1137px;
width: 837px;
z-index: 0;
display: block;
visibility: visible;
overflow: hidden;
}
body > .ui-layout-pane {
padding: 0;
}
.ui-layout-pane {
background: #FFF;
border: 1px solid #BBB;
padding: 10px;
overflow: auto;
}
/* user agent stylesheet */
div {
display: block;
}
/* Inherited from body.ui-layout-container */
body {
font-family: Lucida Grande, Lucida Sans, Geneva, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #EEE;
}