我在尝试向页面添加拆分器时遇到问题。不幸的是，添加拆分器的 jQuery 脚本弄乱了我的布局。
这是一个 jsfiddle 供您查看正在发生的事情。 http://jsfiddle.net/dUTdN/1/
有谁知道使用上面 jsfiddle 示例中来自http://methvin.com/splitter/的 jQuery 拆分器脚本来确保拆分器与内容水平拉伸（进入可滚动区域）的方法？
如果需要更多信息，请询问。
CSS：
html,
body {
height: 100%;
margin:0;
padding:0;
}
#wrap {
background-color: purple;
min-height: 100%;
}
#header {
background-color: yellow;
height: 50px;
}
#pageheader {
background-color: orange;
height: 50px;
}
#mybody {
background-color: red;
overflow-y: auto;
position: absolute;
bottom: 50px;
top: 100px;
left: 0px;
right: 0px;
}
#splitter {
background-color: green;
height: 100%;
position: relative;
}
#sidebar {
background-color: blue;
width: 100%;
}
#content {
background-color: white;
width: 100%;
}
#footer {
background-color: gray;
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
}
.vsplitbar {
width: 5px;
background: #cab;
}
HTML：
<div id="wrap">
<div id="header">
Site Header -> Welcome to my site
</div>
<div id="pageheader">
Page Title -> You are currently viewing the main page
</div>
<div id="mybody">
<div id="splitter">
<div id="sidebar">
My Sidebar<br />Menu Item 1<br />Menu Item 2<br />Menu Item 3<br />Menu Item 4<br />Menu Item 5
</div>
<div id="content">
This is where all the content will go.<br /><br />
Assuming your window is small enough, you should be able to scroll this section. If you do, you will see that the background colour changes to red and the splitter is no longer shown below that point. <br /><br />
Is anyone able to figure out how to change this configuration so that I can have a section that stretches horizontally to fit the content with a splitter?<br /><br />
asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />
asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />
asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />
asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />asdfasdf<br />
</div>
</div>
</div>
<div id="footer">
Website Footer -> Copyright and all that junk.
</div>
</div>
脚本：
$().ready(function() {
$("#splitter").splitter();
});