0

このフィドルを見ると: http://jsfiddle.net/bastien/PybrF/1/

#header {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 50px;
    width: 100%;
    background-color: yellow;
}

#content {       
    top: 51px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: auto;
    background-color: orange;
}

ウィンドウのサイズを変更すると、コンテンツ div に垂直スクロールバーが表示されます。しかし、ウィンドウのサイズを変更しているときにヘッダーのピクセル単位の高さを超えた場合にのみ表示されます(私にはそう思われます...)。

垂直スクロールバーを正しく取得するにはどうすればよいですか?

アップデート

固定されたままのヘッダーが必要です。スクロールバーの中にあるコンテンツが欲しいです。

このようなもの: http://jsfiddle.net/bastien/PybrF/7/

ただし、垂直スクロールバーはヘッダー/本文ではなく、コンテンツ div 内で開始する必要があります。

4

3 に答える 3

0

わかりました私はそれが動作する必要があることを知っていました:

まだいくつかの古い同様のコードを見つけてリファクタリングしました:

楽しんで！:)

Sorry for telling crap.

幅/高さのパーセンテージ設定を削除し、左/右/下などの設定を使用します。もういい。

ずっと前にこの他のプロジェクトにあったメインの div は忘れてください。

http://jsfiddle.net/bastien/PybrF/12/

于 2013-05-30T21:38:50.673 に答える
0

あなたのcssでこれを試してください：

* { margin: 0; padding: 0 }
#header, #content { width: 100%; position: absolute; }

#header {
    height: 50px;
    background-color: yellow;
}

#content {
    top: 50px;
    height: 70%;
    overflow-y: auto;
    background-color: orange;
}

これを生成します：

ここに画像の説明を入力

残りのすべてのスペースを使用するコンテンツの高さについては、サイズ変更イベントに接続された js 関数を使用して、コンテンツの高さをページの高さからヘッダーの高さを引いた値に設定します。正直なところ、これに対する別の解決策はわかりません。

于 2013-05-30T21:18:01.177 に答える
0

固定位置の使用とオーバーフロー設定の適用により、#content領域のみがスクロールされます。

このことを考慮：

1) 要素にオレンジ色の背景色を追加し、bodyマージンを削除します。

body {
    margin:0px;
    padding:0px;
    background-color: orange;
    overflow-x: hidden;
    overflow-y: auto;
}

2) 他の要素を相対的に配置します。

#header {
    position: relative;
    height: 50px;
    background-color: yellow;
}

#container {
    position:relative;
}

http://jsfiddle.net/PybrF/6/

編集：

あなたが探しているものはまだわかりませんが、別の方法があります。これはヘッダーを固定したままにし、スクロールバーを#content領域内に配置します。

body {
    background-color: orange;
    margin:0px;
}
#header {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 50px;
    width: 100%;
    background-color: yellow;
    z-index:1; /* keep the header on top of the content */
}
#content {
    position:relative;
    padding-top:50px; /* height of the header */
}

http://jsfiddle.net/PybrF/8/

于 2013-05-30T21:16:44.987 に答える