Question

我遇到了一个问题，我正在尝试向页面添加拆分器。不幸的是，添加拆分器的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();
});

Answer 1

不应在overflow-y: auto;中提供#mybody，而应该在#content中。我已更新您的 fiddle 以进行演示。

HTML，CSS布局问题与分割器

1 个答案: