分隔符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來演示。