CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Diode Dan
Diode Dan

Reputation: 5151

Bootstrap 3 - Button height match panel (CSS3)

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: enter image description here

However, I get this: enter image description here

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.

Upvotes: 14

Views: 25581

Answers (3)

Fifi
Fifi

Reputation: 3605

Bootstrap 4 : add these classes d-flex align-items-stretch in the parent div.

Upvotes: 7

John Lieb-Bauman
John Lieb-Bauman

Reputation: 1436

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/

Upvotes: 13

user1618143
user1618143

Reputation: 1748

Depending on your exact goal, this may not help, but adding height:100px to the containing div makes your height:100% work as expected. It looks like when the div expands to hold the image, that expansion isn't being carried through to the button like you'd expect.

Another thing that fixes the height is setting the button to position:absolute... but that's silly and unhelpful, unless it happens to be a fixed-width button and you can add a margin-left or something to space the rest of the content around it.

Upvotes: 0

Related Questions