CODEWITHSUNDEEP
htmlcss
Dan
Dan

Reputation: 1596

Scrolling div within an absolutely positioned div

I'm having trouble getting a div to scroll who's parent container is positioned absolutely.

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 }

Upvotes: 1

Views: 118

Answers (3)

keaukraine
keaukraine

Reputation: 5364

Your div.stream-content is not restricted in height, its content makes it taller than div.container that's why scroller in it is inactive. But div.container has overflow:hidden, that's why you only see content being truncated and scroller inactive.

Additionally to solutions proposed in other answers you can make container of div.stream-content with scroller, and remove overflow-y rule for it:

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

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

Upvotes: 0

Gurminder Singh
Gurminder Singh

Reputation: 1755

Just change the stream-content class to

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

Upvotes: 0

CaribouCode
CaribouCode

Reputation: 14398

You need to give the .stream-content div a height.

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

Fiddle: http://jsfiddle.net/6akz6/

Upvotes: 3

Related Questions