1

CSSに奇妙な問題があり、頭を悩ませることができません。私のページは、ヘッダーとフッターが固定され、コンテンツ領域が柔軟な、かなり複雑なレイアウトになっています。

ここで、このコンテンツ領域内に、スクロール可能なdivを作成します。これは、デフォルトで外部コンテナーの高さ全体を使用しますが、それ以上は使用しません。

スクロール可能なdivがヘッダーとフッターの間の唯一の要素であるため、すべてが正常に機能します。

作業デモ

ただし、残念ながら、スクロール可能なdivを単純な固定幅のコンテナ内に配置してページの中央に配置すると、ブラウザはその内部コンテンツに応じてサイズを変更するため、スクロールできなくなりますが、外部divのオーバーフロー：非表示。

動作しないデモ

どんな助けでも大歓迎です、私はこれを理解しようと文字通り最後の日を過ごしました。

ありがとうございました、

パスカル

解決

残念ながら私自身の質問に答えることは許可されていないので、これが私のために働いた解決策です：

のを与えることで問題を解決することができまし#containerた。結果はここで見ることができます：www.hacksrus.net/files/demo_working.html（私も別のハイパーリンクを投稿することは許可されていませんでした。.;-)）height100%

誰かがその理由を説明してくれれば幸いです！

ご協力ありがとうございました！

4

3 に答える 3

1

これを試してください。div ' scrollableContent ' の後に divを作成し、その名前に ' centerAlign ' を付けて、このコードを css ファイルに追加します

わかりました、これがあなたのコードです。これは私がテストしたものです。

<!doctype html>
<html>
  <head>
    <title>Test</title>
    <style>
      * { 
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-size: 20px;
        overflow: hidden;
      }

      header {
        position: absolute;
        height: 100px;
        border: 1px solid #c00;
      }

      #content {
        position: absolute;
        top: 100px;
        bottom: 100px;
        border: 1px solid #c00;
        max-height: 100%;
        overflow: hidden;
      }

      #scrollableContent {
        max-height: 100%;
        overflow: auto;
      }

      footer {
        position: absolute;
        bottom: 0;
        height: 100px;
        border: 1px solid #c00;
      }
      #centerAlign {
            width:745px;
            margin:0 auto;
            background-color:#999;
      }
    </style>
  </head>

  <body>
    <header>header</header>
    <div id="content">
      <div id="scrollableContent">
        <div id='centerAlign'>
        <div>
          <p>BEGIN</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>Foo</p>
          <p>END</p>
        </div>
        </div>
      </div>
    </div>
    <footer>footer</footer>
  </body>
</html>
于 2013-01-17T08:37:55.553 に答える
0

コンテナクラスで設定

overflow: scroll;
于 2013-01-17T08:25:31.850 に答える
0

これを試してください。div ' scrollableContent ' の後に divを作成し、その名前に ' centerAlign ' を付けて、このコードを css ファイルに追加します

#centerAlign {
    width:745px;
    margin:0 auto;
}
于 2013-01-17T08:26:09.133 に答える