0

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;
}
Dan
  • 1,565
  • 3
  • 23
  • 43

1 Answers1

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

Jmh2013
  • 2,625
  • 2
  • 26
  • 42
  • Thanks, I tried that first but perhaps I didn't spell it correct or something, thought I was going mad, works ok now. Thanks – Dan Aug 13 '14 at 15:20