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
}

CSS：位置：固定和水平滚动

1 个答案: