分隔符HTML，CSS布局问题

Question

我遇到了一个问题，我试图将分隔符添加到我的页面。不幸的是，添加分离器的jQuery脚本与我的布局有关。

这里是一个jsfiddle让你看看发生了什么。 http://jsfiddle.net/dUTdN/1/

有谁知道的方式，以确保分路器通过使用从http://methvin.com/splitter/ jQuery的分路器脚本在上面的例子的jsfiddle内容（进入滚动境）水平拉伸？

如果需要更多信息，请询问。

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(); 
}); 

Answer 1

，而不是给overflow-y: auto;在#mybody，它应该在#content。我已更新您的fiddle来演示。