html - 设置为底部时使内容可滚动 : 0;

Question

我有一个绝对 div 固定在相对 div 的底部。我想要做的就是在内部 div 的大小大于外部 div 时使内部 div 可滚动(向上)。

但这并没有发生。 div 无法滚动!这是 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;
}

Answer 1

使用位置 absolute 将元素从文档流中取出，这意味着它在那里，但与其他元素“独立”。使用相对位置将使外部 div 响应内部并且您的滚动将出现。

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

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

编辑使用一些 javascript 设置滚动到底部: https://jsfiddle.net/djwave28/xggjmjqc/6/