How to align a list of elements to bottom?

问题:

I'd like to align a list of elements inside of a container to bottom. By default it sticks to the top of the container.

Note that this list needs to keep its scroll ability. So I can't use flex. Flex makes elements resize and avoids scroll.

I can't think of an easy way to do this.

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>

回答1:

There is a hack using transform scaling in the y-direction - see demo below:

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

回答2:

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

make sure to add position: relative; to the above element

https://jsfiddle.net/ege89t3h/