요소 목록을 맨 아래에 정렬하는 방법은 무엇입니까?

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;을 추가해야합니다 823,210

Answer 2

Y 방향으로 transform 스케일링을 사용하여 해킹이 있습니다 - 데모 아래 참조 :

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