div с позицией: фиксированный и 100% высоты не может прокручиваться
Почему моя правая колонка не прокручивается? Кроме того, как я могу иметь полосу прокрутки моего левого столбца справа от моего левого столбца, потому что, когда мои два столбца имеют содержимое, прокрутка двух столбцов находится в одном месте.
Я 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&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>
|
<a href="#">ALL</a>
|
<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>
1 ответ
Решение
Исправьте ваши стили следующим образом:
.columnsContainer {
height: 100%;
}
.leftColumn {
margin-right: 600px;
background: #fff;
height: 100%;
overflow-y: scroll;
}
Эти изменения, кажется, работают для меня.