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

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

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

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

https://jsfiddle.net/ege89t3h/

Answer 2

有使用transform比例在y方向的黑客 - 看到演示如下：

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