Position element to the bottom of a height: 100% div

I would like to "pin" a button to the bottom of a sidebar-div that has a height of 100%, as it should fill the whole left side of the page.

I tried to do it this way:

.sidebar {
  height: 100%;
  position: relative;
  background-color: #CCCCCC;
 }
.btn {
  position: absolute;
  bottom:0px;
  top: auto;
 }

<div class="sidebar">
  <button class="btn">Button</button>
</div>

It might be because of the height in percent, as it works with a Pixel-height, but there must be some way of getting this done with percent, as the sidebar must span the entire page height.

To fix this, give your html and body a height of 100% as follows. Right now they don't have a defined height set (so they are 0px high), so your button is technically already at the bottom.

Live Example:

html, body {
  height: 100%;
}

.sidebar {
  height: 100%;
  position: relative;
  background-color: #CCCCCC;
 }
.btn {
  position: absolute;
  bottom:0;
 }

<div class="sidebar">
  <button class="btn">Button</button>
</div>