1

ページにスプリッターを追加しようとしているところに問題があります。残念ながら、スプリッターを追加するための 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();
});
4

1 に答える 1

2

inを与える代わりに、overflow-y: auto;in#mybodyであるべきです#content。デモ用にフィドルを更新しました。

于 2013-06-30T17:03:12.460 に答える