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

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

 1
追加された
ビュー: 4
源
ro ru fr es pt de zh hi bn ar

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, 源