css - Bootstrap 3 - 按钮高度匹配面板 (CSS3)

Question

编辑对于那些被这篇文章绊倒的人，我发现有一个名为 Flexbox 的"new"标准。这允许你做我想做的事:Flexbox demos

我正在尝试获得以下效果:

但是，我明白了:

参见 jsFiddle:http://jsfiddle.net/abehnaz/8sPn7/3/

我在 CSS 中尝试了 height: 100%，但没有成功。我认为这可能与以下事实有关:按钮样式优先于高度设置，或者面板根据其内容(在本例中为图像)采用动态高度。

是否有跨浏览器/纯 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%;
}

**编辑:** 为了获得可接受的解决方案，我最终使用了媒体对象中的按钮。它不会自动适合整个高度，但它可以完成工作。它有助于应用 .btn-lg 类。

Answer 1

为了让浏览器理解 100% 实际代表什么，您必须给包含的 div，在本例中是您的 media-object div，或的高度所有 父 div 的高度都为 100%。

这样想，浏览器需要一些数字来开始 100%，并且当所有父 div 都有 height: 100%; 它使用视口(viewport)(窗口大小)作为这个数字。如果您曾尝试制作粘性页脚，您可能会遇到类似的问题。

这是一个指定高度的 jsfiddle: http://jsfiddle.net/8sPn7/5/

这是另一个 jsfiddle，所有高度都为 100%(一种向您展示 100% 规则的快速但肮脏的方式): http://jsfiddle.net/8sPn7/6/