在绝对定位的div内滚动div

我无法让div滚动谁的父容器绝对定位。在绝对定位的div内滚动div

HTML

<div class="container"> 
    <div class="stream page"> 
    <div class="stream-content"> 
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut odio libero, posuere in tortor quis, malesuada ullamcorper ante. Morbi sed orci nisi.</h2> 
    </div> 
    </div> 

    <div class="detail page"> 
    </div> 
</div>

CSS

.container { 
    background-color: pink; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    overflow: hidden; 
} 

.page { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

.detail { 
    background-color: blue; 
    left: 425px; 
} 

.stream { 
    background-color: green; 
    width: 425px; 
} 

.stream-content { overflow-y: scroll }

来源

2013-09-27 Dan Christian

我想你只需要一个'height'增加您的.container，.page和.stream内容元素 – Pattle

你需要给.stream-content div的高度。

.stream-content { 
    height: 100%; 
    overflow-y: scroll }

小提琴：http://jsfiddle.net/6akz6/

来源

2013-09-27 11:51:20 Coop

您是对的。虽然我刚刚意识到这是一个封闭的EmberJS div在我的应用程序中需要100％的高度以及这个。我正在失明。谢谢。 –

的流内容类只是改变

.stream-content { 
    overflow-y: scroll; 
    height: 200px; //Set according to your requirement 
}

来源

2013-09-27 11:53:39

你div.stream-content高度没有限制，其含量使得它比div.container高，这就是为什么滚动条在它是无效的。但div.container有overflow:hidden，这就是为什么你只看到内容被截断和滚动不活动。

另外在其他的答案提出可以使div.stream-content与滚轮容器，并删除它overflow-y规则的解决方案：

.stream { 
    background-color: green; 
    width: 425px; 
    overflow-y: scroll; 
}

http://codepen.io/anon/pen/pEvrg

来源

2013-09-27 11:59:04 keaukraine

在绝对定位的div内滚动div

回答

相关问题