Link button full height of container Bootstrap - css

Question

I'm having issues forcing a link to take full height of its parent container.
Here is a Fiddle of my code: http://jsfiddle.net/z2ua5g4j/
a > span.button-single {
font-size: 30px;
color: #fff;
display: block;
margin-bottom: 8px;
margin-left: 0px;
}
.box {
background-color: #f5f5f5;
border: 1px solid #dcdcdc;
height: 100%;
}
.box h1 {
color: #667477;
font-size: 24px;
margin-left: 20px;
}
.box p {
color: #b1b1b1;
font-size: 13px;
margin-left: 20px;
margin-bottom: 20px;
}
.box a.button {
width: 95px;
background-color: #b4b4b4;
margin-right:-1px;
color: #fff;
padding-top: 13px;
padding-bottom: 13px;
font-size: 15px;
line-height: 16px;
text-align: center;
float: right;
height: 100%;
display: block;
}
.box a.button:hover {
text-decoration: none;
background-color: #a7a7a7;
}
Basically, I want to make the gray button (on the right) take full height of the box container. As of writing, I've tried setting the link to display block and set its height to 100%, but with no avail.
Any ideas?

Answer 1

I changed box to 100px, and setup parent elements of the button to have 100% height
However, you still may want to take a look at http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm to understand how height:100%; is different from width:100%;. I'm guessing you believe they work the same.
#import url("http://getbootstrap.com/dist/css/bootstrap.min.css");
a > span.button-single {
font-size: 30px;
color: #fff;
display: block;
margin-bottom: 8px;
margin-left: 0px;
}
.box {
background-color: #f5f5f5;
border: 1px solid #dcdcdc;
height: 100px;
}
.box h1 {
color: #667477;
font-size: 24px;
margin-left: 20px;
}
.box p {
color: #b1b1b1;
font-size: 13px;
margin-left: 20px;
margin-bottom: 20px;
}
.box a.button {
width: 95px;
background-color: #b4b4b4;
margin-right:-1px;
color: #fff;
padding-top: 13px;
padding-bottom: 13px;
font-size: 15px;
line-height: 16px;
text-align: center;
float: right;
height: 100%;
display: block;
}
.box a.button:hover {
text-decoration: none;
background-color: #a7a7a7;
}
.row{
height: 100%;
}
<div class="box">
<div class="row">
<div class="col-sm-10">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum purus ut pretium ultricies. Cras pulvinar tincidunt lorem, ut posuere risus mollis in. Fusce pharetra urna nec sagittis suscipit.</p>
</div>
<div class="col-sm-2" style="height:100%;">
<span class="button-single glyphicon glyphicon-plus-sign"></span> More<br/>Details
</div>
</div>
</div>

Answer 2

Just use the btn-block class instead of messing around with div heights, like this:
<div class="col-md-3"><button class="btn btn-block" >Show Details</button></div>