在一个绝对定位的div中滚动div

时间:2013-09-27 11:46:20

标签: html css

我无法使用div来滚动谁的父容器绝对定位。

http://codepen.io/establish/pen/zdFaL

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 }

3 个答案:

答案 0 :(得分:3)

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

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

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

答案 1 :(得分:0)

只需将 stream-content 类更改为

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

答案 2 :(得分:0)

您的div.stream-content的高度不受限制,其内容比div.container更高,这就是为什么其中的滚动条处于非活动状态的原因。但是div.containeroverflow:hidden,这就是为什么你只看到内容被截断和滚动不活动的原因。

除了在其他答案中提出的解决方案,您可以使用滚动条制作div.stream-content的容器,并删除overflow-y规则:

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

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