4

当社のウェブサイトのマスターページには、左側にいくつかのメニューオプションがある狭い列があり、ページのコンテンツが右側の残りのスペースを占めています。

ページコンテンツを左の列から独立してスクロールできるようにするための最良の方法を決定しようとしています。

メインコンテンツ用にスクロール可能なdivを作成できることはわかっていますが、ブラウザーのメインスクロールバーが表示されないように、高さをブラウザーウィンドウの高さとまったく同じに保つ必要があります。JavaScriptでサイズを変更した場合、ウィンドウのサイズが変更されると遅延が発生し、少し安っぽく見えると思います。

メインページがスクロールするときに左の列を静止させておくためにページを構造化するためのより良い方法はありますか？（注：高すぎる場合は、左の列もスクロールする必要がある場合があります。）

ページレイアウトhttp://www.softcircuits.com/Client/Layout.png

上の画像は、目的のレイアウトを示しています。メインコンテンツをサイドバーやヘッダーから独立してスクロールしたい。ただし、スクロール可能にするだけで、<div>2つのスクロールバーを並べて表示できます（1つはスクロール可能<div>で、もう1つはメインブラウザウィンドウ用です）。

4

1 に答える 1

6

fixedページの残りの部分がスクロールしている間、ウィンドウに固定されたままになるように、左側の列を配置できます。例えば、

.left-column {
  position: fixed;
}

デモ： http： //jsfiddle.net/Yv3qX/

下から配置することで、独立してスクロールさせることもできます。

.left-column {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow: scroll;
}

デモ： http： //jsfiddle.net/Yv3qX/1/

于 2013-01-15T17:23:22.207 に答える