Webページ上で右のスクロールバーを持つ方法は、中央のペインだけをスクロールします

あなたがFacebookのメッセージページを見ると、ヘッダーがあり、その下に3つのセクションがあります。スクロールバーは中央セクションを制御し、左右のセクションは静的なままです。自分のウェブページで同じ動作を実装するにはどうすればよいですか?それはすべてが固定されたままで、スクロールバーは中央セクションのみを制御しますか?ところで、Facebookの実装はChromeで正常に動作せず、Firebugが有効になっているときにFFで動作しなくなります。

1

1 答え

センターセクションに特別な設定をする必要はありません。停止したいブロック要素はすべて、 position:fixed にする必要があります。

例えば

<html>
  <head>
    
  </head>
  <body>
    
This will stay on the top of the browser window.
 
    <div id="sidebar">
      This will stay on the left.
    </div>
    <div id="content">
      This will scroll normally.
    </div>
  </body>
</html>
4
追加された
SIDEBARはHEADERの上部にとどまります。それは意図的でしたか?私はあなたの2つを削除するために私のポイントの1つを無駄にしません。
追加された 著者 zequinha-bsb,
それはあなたのところでは正直ではありませんでした。あなたは最初の間違いに言及せずに投稿を編集するだけで、私を嘘つきと呼んでいます。
追加された 著者 zequinha-bsb,
それをキャッチするためにありがとう。
追加された 著者 Preacher,
あなたはヘッダーのZ-インデックスを使っています。私の答えの編集をチェックしてください。
追加された 著者 Preacher,
私はあなたに従っていない。問題のスクリーンショットをあなたの質問に入れられますか?
追加された 著者 Preacher,
@Preacherありがとう!スクロールすると、私の中身がヘッダーの上を転がります。私はそれをヘッダーの下で行動して維持するために、どのように強制するのですか?
追加された 著者 Barka,
@Preacher、ありがとう! z-indexは上記を解決します。しかし、フッターもあり、中央のパネルの内容はページの一番下まで広がっていて、フッターに移動します。そのZ-指数が底部パネルのZ-指数よりも小さくても。 z-indexが機能していたとしても、中央のパネルの下部にあるコンテンツをカバーするだけです。
追加された 著者 Barka,
私はポジションを持っていました:ミドルパネルの相対的なものですが、それを取り除くと、フッターの問題は解決されました。
追加された 著者 Barka,
z-index解はそれをカットしません。今度は中央のdivの一番上の内容がヘッダーの後ろに隠されています。ヘッダーの下から開始するには、body divまたはそのdivをどのように移動するかを知っていますか?どうもありがとう!
追加された 著者 Barka,
それは私の悪かったです。私はセンターパネルの上端を設定していませんでした。助けてくれて本当にありがとうございます :)
追加された 著者 Barka,
最後の問題が1つ残っています。センターパネルの縁が丸くなっています。ページがレンダリングされたときにこれはうまく見えますが、ユーザーがスクロールすると、パネルが上に移動し、丸い角が消えます。
追加された 著者 Barka,
@Preacher私はあなたの答えを「答え」と書いて、> stackoverflow.com/questions/8113592/… どうもありがとう!
追加された 著者 Barka,