如何将元素列表对齐到底部？

Question

我想将容器内的元素列表对齐到底部。默认情况下，它会粘在容器的顶部。

请注意，此列表需要保持其滚动功能。所以我不能使用flex。 Flex使元素调整大小并避免滚动。

我想不出一个简单的方法。

JSFiddle

#list {
  height: 200px;
}

.item {
  height: 30px;
  line-height: 30px;
  background-color: lightgray;
  margin: 3px 0;
}

<div id="list">
  <div class="item">Item0</div>
  <div class="item">Item1</div>
  <div class="item">Item2</div>
  <div class="item">Item3</div>
  <div class="item">Item4</div>
  <div class="item">Item5</div>
  <div class="item">Item6</div>
  <div class="item">Item7</div>
  <div class="item">Item8</div>
  <div class="item">Item9</div>
</div>

Answer 1

在y方向上有一个使用transform缩放的黑客攻击 - 请参阅下面的演示：

＆＃13;

＆＃13;

#list {
  height: 200px;
  border:1px solid green;
  overflow-y: auto;
  transform: scaleY(-1);
}
.item {
  height: 30px;
  line-height: 30px;
  background-color: lightgray;
  margin: 3px 0;
  transform: scaleY(-1);
}

＆＃13;

<div id="list">
  <div class="item">Item0</div>
  <div class="item">Item1</div>
  <div class="item">Item2</div>
  <div class="item">Item3</div>
  <div class="item">Item4</div>
  <div class="item">Item5</div>
  <div class="item">Item6</div>
  <div class="item">Item7</div>
  <div class="item">Item8</div>
  <div class="item">Item9</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

#list {
  position: absolute; bottom: 0;
}

确保将position: relative;添加到上述元素

https://jsfiddle.net/ege89t3h/