1

スクロールバーなしでブラウザーのすべての表示領域を占める Web アプリケーションを構築しています。ウィンドウは、必要に応じて独自のスクロールバーを持つペインに分割されます。

要素を絶対配置できれいに配置しました。デモ: http://jsbin.com/adozul/6/edit

エキス： 

<body>
    <header id="header"></header>
    <div id="main">
      <section class="pane"></section>
      <section class="pane"></section>
      <section class="pane"></section>
      <section class="pane"></section>
    </div>
</body>

#header, #main, .pane {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
#header {
    bottom: none;
    height: 35px;
}
#main {
    top: 36px;
}
.pane:nth-child(1) {
    left: 0;
    right: 75%;
}
.pane:nth-child(2) {
    left: 25%;
    right: 50%;
}
.pane:nth-child(3) {
    left: 50%;
    right: 25%;
}
.pane:nth-child(4) {
    left: 75%;
    right: 0;
}

野生の水平スクロールバーが表示されることを除いて、すべて問題ないように見えます (Firefox と Chrome の両方で)。

奇妙なことに、FireBug によると、右側の余白はページのどの要素にも属さず、どの要素にも余白がありません。

UPD:通行人が指摘したように、幅を超える要素があり、4 番目のペイン内にあるため、解決策は明らかです。

この問題を次のルールまで追跡しました。 

.pane:nth-child(4) {
    left: 75%;
}

このルールそのものを無効にすると、水平スクロールバーが消えます。他のペインの配置ルールを無効にしても、スクロールバーには影響しません。

でスクロールバーを取り除くことができますhtml { overflow: hidden; }。しかし、スクロールバーが最初に表示されるのはなぜですか? また、4 ペインのレイアウトを崩さずに、スクロールバーが表示されないようにするにはどうすればよいでしょうか?

PS タスクがよりエレガントな方法で解決できると思われる場合は、遠慮なく指摘してください。ただし、ユーザーが jQuery UI Resizable を使用してペインのサイズを変更できるようにすることを考慮してください。

4

1 に答える 1