css - CSS:位置:固定和水平滚动

Question

我在100％高度div时遇到问题。

到目前为止，如果使用position:fixed和top:0向下滚动，我已经使用bottom:0来避免出现空白。效果很好，但是如果水平滚动，则div不会与页面的其余部分一起滚动。

我将容器的位置向左定位了20px，当浏览器的宽度不比文档窄时，它就保持在正确的位置，但是当问题出现时，它保持在正确的位置。

编辑：绿色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/

Answer 1

这是working jsFiddle。

如果要像灰色div一样水平滚动，则需要在绿色div上使用position:absolute而不是position:fixed。

.greenbg {
    background-color: #CFC;
    width: 340px;
    height:896px;
    position:absolute;
    margin-left: 20px;
    top:0px;
    bottom:0px
}