所以基本上我有一个 jqxSplitter 作为具有固定大小的容器。左侧应该是 2 个 jqxExpander，其中较低的应该包含一个 jqxTree。到目前为止，这有效，除了：
当我将第二个扩展器的高度设置为 100% 时，它会扩展至分离器的边界之上。我不能使用 auto 作为它的大小，因为树不会显示。
那么，如何让第二个扩展器使用所有剩余空间，而不会超出边界？
到目前为止，这是我的代码，它很长，但只是因为我给了树很多项目来检查滚动条的行为，我想如果你想尝试的话我就让它进来。
<html>
<head>
<link rel="stylesheet" href="../jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css"/>
<script type="text/javascript" src="../jqwidgets/scripts/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxexpander.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxtree.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Create jqxSplitter
$("#jqxSplitter").jqxSplitter({
width: 1000,
height: 500
});
// Create jqxExpanders
$("#jqxexpander1").jqxExpander({
width: 'auto',
height: 'auto'
});
$("#jqxexpander2").jqxExpander({
width: '100%',
height: '100%',
initContent: function () {
// Create jqxTree
$('#jqxTree').jqxTree({
width: '99%',
height: '99%'
});
}
});
});
</script>
</head>
<body>
<div id='jqxSplitter'>
<div>
<div id='jqxexpander1'>
<!--Header-->
<div>
Header</div>
<!--Content-->
<div>
Content
</div>
</div>
<div id='jqxexpander2' style="bottom: 0px">
<!--Header-->
<div>
Header</div>
<!--Content-->
<div>
<div id='jqxTree' style="border-style: none">
<ul>
<li>User
<ul>
<li>Info
<ul>
<li>Info 1</li>
<li>Info 2</li>
</ul>
</li>
<li>Documents
<ul>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 1</li>
<li>Document 2</li>
</ul>
</li>
<li>More Documents
<ul>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 3</li>
<li>Document 4</li>
<li>Document 5</li>
<li>Document 6</li>
<li>Document 7</li>
<li>Document 8</li>
<li>Document 9</li>
<li>Document 10</li>
<li>Document 11</li>
<li>Document 12</li>
<li>Document 13</li>
<li>Document 14</li>
<li>Document 15</li>
<li>Document 16</li>
<li>Document 17</li>
<li>Document 18</li>
<li>Document 19</li>
<li>Document 20</li>
<li>Document 21</li>
<li>Document 22</li>
<li>Document 23</li>
<li>end</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div></div>
</div>
</body>
</html>