CODEWITHSUNDEEP
htmlcss
jonhz
jonhz

Reputation: 53

Make content scrollable when is set to bottom: 0;

I have an absolute div stuck to the bottom of a relative div. All i want to do is to make the inner div scrollable (upwards) whenever its size gets bigger than the outer div.

But that does not happen. The div doesn't get scrollable! Here's the fiddle: https://jsfiddle.net/xggjmjqc/

HTML:

<div class="mobile1">
  <div class="bottom1">
  </div>
</div>

<br><br>

<!-- when inner gets bigger than outer: -->

<div class="mobile2">
  <div class="bottom2">
  </div>
</div>

CSS:

.mobile1{
  height:400px;
  width: 300px;
  background-color: red;
  position: relative
}

.bottom1{
  height:100px;
  width: 300px;
  position: absolute;
  bottom: 0;
  background-color: blue;
}

/* when inner gets bigger than outer: */

.mobile2{
  height:400px;
  width: 300px;
  background-color: red;
  position: relative;
  overflow-y: scroll;
}

.bottom2{
  height:500px;
  width: 300px;
  position: absolute;
  bottom: 0;
  background-color: blue;
}

Upvotes: 2

Views: 1283

Answers (1)

Daniel
Daniel

Reputation: 4946

Using a position absolute takes an element out the document flow, meaning it is there, but is "independent" from the other element. Using position relative will make the outer div respond to the inner and your scroll will appear.

.bottom2{
  height:500px;
  width: 300px;
  position: relative;
  bottom: 0;
  background-color: blue;
}

fiddle: https://jsfiddle.net/djwave28/xggjmjqc/3/

edit With some javascript set scroll to bottom: https://jsfiddle.net/djwave28/xggjmjqc/6/

Upvotes: 2

Related Questions