Bootstrap 3 - панель соответствия высоты кнопок (CSS3)

ИЗМЕНИТЬ Для тех из вас, кто споткнулся об этом посту, я обнаружил, что существует "новый" стандарт под названием Flexbox. Это позволяет делать то, что я хочу сделать: Flexbox demos

Я пытаюсь получить следующий эффект:

Однако я получаю следующее:

См. jsFiddle: http://jsfiddle.net/abehnaz/8sPn7/3/

Я пробовал height: 100% в CSS, но мне не повезло. Я думаю, что это может быть связано с тем, что либо стиль кнопки имеет приоритет над настройкой высоты, либо панель принимает динамическую высоту на основе ее содержимого (в данном случае, изображения).

Есть ли способ перекрестного браузера/чистого CSS, чтобы высота кнопки соответствовала высоте панели (с соответствующим заполнением и установкой содержимого?)

Спасибо!

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: ** Чтобы получить приемлемое решение, я закончил использование кнопки в медиа-объекте. Он не полностью соответствует всей высоте, но выполняет эту работу. Это помогло применить класс .btn-lg.

Ответы

Ответ 1

Чтобы браузер понял, что на самом деле представляет 100%, вы должны предоставить содержащий div, в этом случае ваш media-object div, высота или имеет все родительские divs высотой 100%.

Подумайте об этом так, браузеру нужно некоторое число, чтобы начать 100%, а когда все родительские div имеют height: 100%;, для этого числа используется окно просмотра (размер окна). Если вы когда-либо пытались сделать липкий нижний колонтитул, вы, вероятно, столкнулись с подобными проблемами.

Вот jsfiddle с указанной высотой: http://jsfiddle.net/8sPn7/5/

Вот еще один jsfiddle со всей высотой 100% (быстрый грязный способ показать вам правило 100%): http://jsfiddle.net/8sPn7/6/

Ответ 2

В зависимости от вашей конкретной цели это может не помочь, но добавление height:100px к содержащему div делает ваш height:100% работать как ожидалось. Похоже, когда div расширяется, чтобы удерживать изображение, это расширение не переносится на кнопку, как вы ожидали.

Еще одна вещь, которая фиксирует высоту, - это установка кнопки position:absolute... но эта глупость и бесполезность, если только она не является кнопкой фиксированной ширины, и вы можете добавить margin-left или что-то в нужное место содержимого вокруг него.

Ответ 3

Bootstrap 4: добавьте эти классы d-flex align-items-stretch в родительский div.