Question

我有一个绝对的div粘在相对div的底部。我想做的就是让内部div可以滚动（向上），只要它的大小比外部div大。

但这不会发生。 div不可滚动！这是小提琴：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会占用文档流中的元素，这意味着它在那里，但是＆＃34;独立的＆＃34;来自其他元素。使用位置相对将使外部div响应内部，您的滚动将出现。

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

小提琴：https://jsfiddle.net/djwave28/xggjmjqc/3/

修改有些javascript设置滚动到底部： https://jsfiddle.net/djwave28/xggjmjqc/6/

当设置为bottom时，使内容可滚动：0;

1 个答案: