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

【问题标题】：How to align a list of elements to bottom?如何将元素列表对齐到底部？
【发布时间】：2017-09-09 12:34:16
【问题描述】：

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

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

我想不出一个简单的方法来做到这一点。

#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>

【问题讨论】：

有没有办法可以添加图片来说明预期结果是什么？
当然，刚刚做了:)
你为什么不给 margin-top:100px;到#list id？
@NirjharVermani 项目数量不同。

标签： html css scroll alignment

【解决方案1】：

有一个在 y 方向使用 transform 缩放的 hack - 请参见下面的演示：

#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);
}

<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>

【讨论】：

项目和滚动是倒置的。
@Elfayer 这就是为什么它是一个 hack... AFAIK 你的下一个最佳选择是使用absolute positioning
我猜你是对的，我以为我错过了将元素粘贴到底部而不是顶部的 CSS 规则。
@Elfayer 我也尝试过 absolute-relative 定位，但无法正确滚动，希望您能找到更好的方法:)
实际上绝对定位不会产生滚动：jsfiddle.net/ez4paood/3

【解决方案2】：

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

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

https://jsfiddle.net/ege89t3h/

【讨论】：