How to make div stick to the bottom of parent div?

Could anyone please help me making div#bottom stick to the bottom of the parent div, so when I click on the button inside it will allow me to show elements from div#list above itself?

Preferably I would want to avoid JS, jQuery, 开发者_StackOverflow中文版etc. or at least in the layout:

<div class="wrapper">
   <div id="top">
     <ul>
      ...
      ...
     </ul>
   </div>
   <div class="bottom">
      <div id="button">
         <div id="list">
            <ul>
               <li>elem 1</li>
               <li>elem 2</li>
            </ul>
         </div>
      </div>
   </div>
</div>

---

.wrapper{position:relative;}
.bottom{position:absolute; bottom:0;}

Edited

Thanks to @centr0 and @T.J Crowder the key thing to understand here is that position:relative in .wrapper will "contain" any element that has position:absolute. It's like declaring boundaries for .bottom. Without position:relative in .wrapper, .bottom would break out of that div

---

I run to a similiar problem. The solution from Val is good, but has one issue - the inner div will stick to bottom, but it will not affect the height of parrent div, thanks to its "position: absolute;" (it is out of the page layout flow).

So here is my expanded solution for anyone having similiar problem:

.wrapper {
    position: relative;
    padding-bottom: 50px;
}

.wrapper .bottom {
    position: absolute;
    bottom: 0px;
    height: 50px;
}

As you can see, I set height of the .bottom ang padding-bottom of the wrapper. Disadvantage is, that the height of the footer is on two places. But I think it is a good solution for example for product list, where there is fixed height in footer of the box (like for price etc).

Remember, that everytime you set "position: absolute;", the element will be absolutely positioned against first parent div, which has set position attribute. Or, eventualy, against the page itself.