Trying to create a flexible 3 button footer - css

Question

Here is my fiddle
http://jsfiddle.net/8BJ94/68/
I need the buttons to be positioned centrally with a bit of padding around each one in the footer.
I've very close but the buttons seems to be overflowing off the bottom of the page?
html, body {
height:100%;
width:100%;
margin:0;
}
div#footer{
width:100%;
height:10%;
bottom:0;
top:90%;
left:0;
background-color:#2A2A2A;
position:fixed;
display:table-cell;
vertical-align:middle;
}
#button {
height : 90%;
width : 30%;
background-color : #FFFFFF;
margin:1.666%;
text-align:center;
float:left;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
}
#button:before {
content:'';
height:10%;
vertical-align:middle;
display:inline-block;
}
<div id="footer">
<div id="button">button text</div>
<div id="button">button text</div>
<div id="button">button text</div>
</div>

Answer 1

I have changed a lot of your css, this is what I have now:
http://jsfiddle.net/wf_4/8BJ94/78/
html, body {
height:100%;
width:100%;
margin:0;
}
html {
display:table;
}
body {
display:table-cell;
vertical-align:middle;
background:#48a;
text-align:center;
}
div#footer {
width:100%;
height:10%;
min-height:40px;
bottom:0;
left:0;
background-color:#2A2A2A;
position:fixed;
padding:8px;
display:table;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.button {
height : 50%;
width : 30%;
background-color : #FFFFFF;
margin:auto 2%;
display:table-cell;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
}
.button:before {
content:'';
height:100%;
vertical-align:middle;
display:inline-block;
}
.buttonGap {
height:50%;
width:1%;
display:inline-block;
}
and HTML:
<div id="footer">
<div class="button">button text</div>
<div class="buttonGap"></div>
<div class="button">button text</div>
<div class="buttonGap"></div>
<div class="button">button text</div>
</div>

Answer 2

I think that's what you need:
http://jsfiddle.net/e2262/1/
What was frorcing your footer to don't be elastic vertical (in height was)
div#footer {
height:10%;
top:90%;
}
SO i get ride of those 2 attribute in the CSS. Now it's anchored to the bottom and as the buttons grow the footer is able to grow in height ;)
Note: never use multiple elements with the CSS id attribute. I swapped with CSS classes

Answer 3

Just set the height of the button class to smaller, like this (note: I changed the button id's into classes, as id's should be unique - also pointed out by one of the commenters):
.button {
height : 60%; // <-- changed this
width : 30%;
background-color : #FFFFFF;
margin:1.666%;
text-align:center;
float:left;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
}
Fiddle here

Answer 4

I've updated my solution using flex-box:
HTML:
<div id="footer">
<div class="button">button text</div>
<div class="button">button text</div>
<div class="button">button text</div>
</div>
CSS:
div#footer{
position:fixed;
height: 10%;
bottom:0;
left:0;
right:0;
background-color:#2A2A2A;
padding:0;
margin:0;
text-align:center;
display: flex;
justify-content: space-around;
align-items: center;
}
#footer .button {
display: inline-block;
background-color : #FFFFFF;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
width: 30%;
height: 80%;
line-height: 25px;
}
JSFiddle