Bootstrap 3 - Button height match panel (CSS3)

Question

EDIT For those of you stumbling over this post, I have found that there is a "new" standard called Flexbox. This allows you do what I want to do: Flexbox demos

I am trying to get the following effect:

However, I get this:

See jsFiddle: http://jsfiddle.net/abehnaz/8sPn7/3/

I tried height: 100% in CSS, but I had no luck. I think this might have to do with the fact that either the button style takes precedence over the height setting, or that the panel takes a dynamic height based on its contents (in this case, the image).

Is there a cross-browser/pure CSS way to make the button height match the panel height (with appropriate padding and fitting of content?)

Thanks!

HTML:

<div class="panel panel-default">
<div class="panel-body">
    <div class="media">
        <div class="media-object pull-left">
            <button class="btn btn-info option-button">A</button>
            <img src="holder.js/200x100" />
        </div>
        <div class="media-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
        </div>
    </div>
</div>

CSS:

.option-button {
    height:100%;
}

**EDIT: ** To get to a solution that was acceptable, I ended up using the button in a media object. It does not automatically fit the entire height, but it does the job. It helped to apply the .btn-lg class.

Answer 1

In order for the browser to understand what 100% actually represents, you must give the containing div, in this case your media-object div, a height or have all parent divs have height 100%.

Think of it this way, the browser needs some number to start 100%, and when all parent divs have height: 100%; it uses the viewport (window size) for this number. If you have ever tried to do a sticky footer you have probably run into similar problems.

Here is a jsfiddle with a specified height: http://jsfiddle.net/8sPn7/5/

Here is another jsfiddle with everything height 100% (a quick a dirty way to show you the 100% rule): http://jsfiddle.net/8sPn7/6/