fix a div to the bottom of the 100% container and allow the while container to scroll

Question

I've got a 100% height container, I want to align a button 10% from the bottom and still allow the button to scroll.

Here's a fiddle of what i have so far: http://jsfiddle.net/e7cc9qq7/8/

Here's the css for the button

#button {
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 3px;
  bottom:10%;
  position:fixed;
  background:red;
}

Answer 1

You want to use position: absolute on the button, not position: fixed. And make sure the parent container has position: relative

#test1 {
    height: calc(100% - 60px);
    background:pink;
    position: relative;
}
#button {
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 3px;
    bottom:10%;
    position: absolute;
    background:red;
}

FIDDLE