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

Question

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

Answer 1

.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

Answer 2

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.