1

高さ 100% の div に問題があります。

これまでは、 と で下position:fixedにスクロールした場合に空白のギャップが生じるのを回避していました。これはうまく機能しますが、水平方向にスクロールすると、div はページの残りの部分と一緒にスクロールしません。top:0bottom:0

コンテナーから 20px 左に配置しましたが、ブラウザーがドキュメントよりも狭くないときは正しい位置に留まりますが、問題が発生したときです。

編集: 緑の div は灰色の div として動作し、水平にスクロールすると移動する必要があります。

ここでコードを見つけることができます：

<div style="width: 1200px; margin: 0 auto; padding-bottom:50px">
  <div style="background-color: #CFC; width: 340px; position:fixed; margin-left: 20px; top:0px; bottom:0px"></div>
  <div style="background-color: #CCC; width: 340px; height: 395px; position: absolute; margin-left: 20px; top: 0px"></div>
  <div style="box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8); margin-top: 60px">
    <div style="background-color: #FFF; width: 1200px; height: 260px"></div>
    <div style="background-color: #666; width: 1200px; height: 26px"></div>
    <div style="background-color: #FFF; width: 1200px; min-height: 500px"></div>
  </div>
</div>

jsFiddle - http://jsfiddle.net/q7tEE/

4

1 に答える 1

1

これは動作中の jsFiddleです。

灰色の div のように水平にスクロールする場合position:absoluteではなく、緑色の div で使用する必要があります。position:fixed

.greenbg {
    background-color: #CFC;
    width: 340px;
    height:896px;
    position:absolute;
    margin-left: 20px;
    top:0px;
    bottom:0px
}
于 2013-03-28T13:08:08.327 に答える