Can you suggest a more effective approach to set the height of a child element equal to its parent's height?
I have attempted the following method without success:
.child {
background: none repeat scroll 0 0 #5B6567;
border-radius: 5px 0 0 0;
display: inline-block;
float: left;
line-height: 30px;
padding-top: 6px;
position: relative !important;
text-align: center;
width: 12%;
height:100%
}
<div class="row-fluid">
<div class="child">
child
</div>
</div>
You can view my attempt on jsfiddle http://jsfiddle.net/WTmt6/1/. Please note that I need the grey div on the left to match the height of the larger red .media div. ps: I am constrained to using percentage values for dimensions in my layout.