div position:fixed 和 100% 高度无法滚动

Question

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

我 position:fixed 和 height:100%。

代码如下：

<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>

Answer 1

像这样修正你的样式：

.columnsContainer {
    height: 100%;
}

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

这些更改似乎对我有用。

div position:fixed 和 100% 高度无法滚动

div with position:fixed and 100% height can't scroll

html

css

fixed

scrollbar

multiple-columns