位置：固定且 100% 高度的 div 无法滚动答案

【问题标题】：div with position:fixed and 100% height can't scroll位置：固定且 100% 高度的 div 无法滚动
【发布时间】：2015-09-20 19:34:59
【问题描述】：

为什么我的右栏不滚动？另外，我的左列的滚动条怎么能在我的左列的右侧，因为当我的两列有内容时，两列的滚动在同一个地方。

我有position:fixed 和height:100%。

Here is a live website.

代码如下：

<body id="top">
  <div style="height: 100%;" id="container">
    <div style="height: 100%; width:100%; position:absolute;" id="o-wrapper" class="o-wrapper">
      <div class="columnsContainer">
        <div class="leftColumn">
          <div style=" margin:0px auto; border:0px solid #fff; width:auto;">
            <div class="lazy">
              <img class="imgstylefirst" src="img/3.jpg" alt="" />
              <br/>
              <div class="creditstyle">
                Crop Top, Six Crisp Days. Skirt, Topshop. Clutch, Fendi. Rings, Amarilo and Pushmataaha. Shoes, Boohoo.
              </div>
            </div>
            <div class="lazy">
              <img class="imgstyle" src="img/2.jpg" alt="" />
              <br/>
              <div class="creditstyle">
                Rings, Amarilo, Pushmataaha and Push&amp;Co.
              </div>
            </div>
            <div class="lazy">
              <img class="imgstyle" src="img/4.jpg" alt="" />
              <br/>
              <div class="creditstyle">
                Top, Six Crisp Days. Shawl, Unif. Rings, Amarilo.
              </div>
            </div>
            <div class="lazy">
              <img class="imgstyle" src="img/5.jpg" alt="" />
              <br/>
              <div class="creditstyle">
                Jacket, AZUL by moussy. Earrings, Artelier Mx. Rings, Amarilo.
              </div>
            </div>
            <div class="lazy">
              <img class="imgstyle" src="img/6.jpg" alt="" />
              <br/>
              <div class="creditstyle">
                Jacket, AZUL by moussy. Earrings, Artelier Mx. Rings, Amarilo.
              </div>
            </div>
          </div>
        </div>
        <div class="rightColumn">
          <div style="padding:70px 0px 50px 0px; margin: 0px 20px;">
            <a href="#">PREVIOUS</a>
            &nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="#">ALL</a>
            &nbsp;&nbsp;|&nbsp;&nbsp;
            <a href="#">NEXT</a>
          </div>


          <div style="margin: 0px 20px;">
            <span style="100%" class="newstitle">Y</span>
            <p style="margin-top:-7px;">Preview</p>
            <hr style="margin: 15px 0 30px 0;" class="gridnews">
            <div class="flipper">ONE</div>
            <div style="margin:10px 0px 40px 0px; display:block" class="flip">
              blablabla
            </div>
            <div class="flipper">TWO</div>
            <div style="margin:10px 0px 80px 0px;" class="flip">
              Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>Photographer
              <br/>Stylist
              <br/>Makeup
              <br/>Hair
              <br/>Model
              <br/>
            </div>
            <div style="margin-top:20px;" class="flipper">THREE</div>
            <div style="margin-top:10px;" class="flip">
              blablabla
            </div>
            <div style="margin-top:20px;" class="flipper">FOUR</div>
            <div style="margin-top:10px;" class="flip">
              blablabla
            </div>
            <div style="margin-top:20px;" class="flipper">FIVE</div>
            <div style="margin-top:10px;" class="flip">
              blablabla
            </div>
            <div style="margin-top:20px;" class="flipper">SIX</div>
            <div style="margin-top:10px;" class="flip">
              blablabla
            </div>
            <div style="margin-top:20px;" class="flipper">SEVEN</div>
            <div style="margin-top:10px;" class="flip">
              blablabla
            </div>
            <div style="margin-top:20px;" class="flipper">EIGHT</div>
            <div style="margin-top:10px;" class="flip">
              blablabla
            </div>
            <div style="margin-top:20px;" class="flipper">NINE</div>
            <div style="margin-top:10px;" class="flip">
              blablabla
            </div>
            <div style="margin-top:20px;" class="flipper">TEN</div>
            <div style="margin-top:10px;" class="flip">
              blablabla
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

【问题讨论】：

您到底想要发生什么？在 Chrome 中需要时，您的右栏可以正常滚动。
@Alan in firefox你可以找到问题，调整页面大小，我觉得左栏的滚动条最好放在左栏的右边，不是吗？
好的，我可以在 FF 中看到问题。下面建议的答案似乎允许两列滚动
是的，但是当你调整页面大小时，你看不到右栏的所有内容，为什么？
下面的答案解决了问题，但它不是一个很好的页面或用户体验。我建议你尝试不同的页面结构。

标签： html css scrollbar multiple-columns fixed

【解决方案1】：

像这样修复你的样式：

.columnsContainer {
    height: 100%;
}

.leftColumn {
    margin-right: 600px;
    background: #fff;
    height: 100%;
    overflow-y: scroll;
}

这些更改似乎对我有用。

【讨论】：

那是完美的@Hieu Le，但我该如何解决右栏滚动的问题。当您调整页面大小（减少高度）时，您看不到 div 的其余部分（六、七、八……）
您的网站看起来更好。您将 overflow-y: auto 添加到您的 rightclolumn 类中。我建议将 top: 0 添加到您的 rightColumn 类中，以便滚动条从顶部开始