2

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;
}
jonhz
  • 53
  • 8
  • make the inner position relative – Daniel Sep 15 '17 at 01:43
  • like [this](https://jsfiddle.net/xggjmjqc/2/)? – Shadow Fiend Sep 15 '17 at 01:44
  • can't be relative because then it would't be sticked to the bottom in case it gets smaller than the outer (first case). The content of the inner div it's a variable so sometimes might be smaller and sometimes might be bigger. – jonhz Sep 15 '17 at 01:58

1 Answers1

2

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/

Daniel
  • 4,816
  • 3
  • 27
  • 31
  • yes but then it would't be sticked to the bottom in case it gets smaller than the outer (first case). The content of the inner div it's a variable so sometimes might be smaller and sometimes might be bigger. – jonhz Sep 15 '17 at 01:53
  • Set you scroll to max in javascript. Have a look here: https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div – Daniel Sep 15 '17 at 02:01
  • still does not solve the problem, as you can see that if you set the height of bottom2 to 300px it doesn't stick to the bottom. – jonhz Sep 15 '17 at 02:20
  • Oops ... It is you bottom div. have a look now at fiddle (6) – Daniel Sep 15 '17 at 02:32
  • hey i got it working thanks for your help anyway... now if you change to 100px you'll see it keeps at the bottom https://jsfiddle.net/xggjmjqc/10/ – jonhz Sep 15 '17 at 15:01
  • Ow.. that bottom .. Sorry, I misinterpreted. Well done.. Indeed you need to apply javascript after page load. Be aware of your application though. Changes in browser window size may influence the layout. – Daniel Sep 15 '17 at 17:43