14

编辑 对于那些在这篇文章中磕磕绊绊的人，我发现有一个名为 Flexbox 的“新”标准。这可以让你做我想做的事：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课程。

4

3 回答 3

13

为了让浏览器理解 100% 实际代表什么，你必须给包含的 div，在这种情况下你的media-objectdiv，一个高度或让所有父 div 的高度为 100%。

这样想，浏览器需要一些数字来启动 100%，并且当所有父 div 都具有height: 100%;该数字时，它使用视口（窗口大小）。如果你曾经尝试过做一个粘性页脚，你可能会遇到类似的问题。

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

这是另一个所有高度为 100% 的 jsfiddle（向您展示 100% 规则的快速肮脏方式）：http: //jsfiddle.net/8sPn7/6/

于 2013-09-19T18:50:39.710 回答
6

Bootstrap 4：d-flex align-items-stretch在父 div 中 添加这些类。

于 2017-11-08T08:44:13.470 回答
0

根据您的确切目标，这可能无济于事，但添加height:100px到包含内容中div会使您的height:100%工作按预期进行。看起来当div扩展以保存图像时，扩展并没有像您期望的那样传递到按钮。

修复高度的另一件事是将按钮设置为position:absolute... 但这是愚蠢且无益的，除非它恰好是一个固定宽度的按钮，并且您可以添加 amargin-left或其他内容以将其周围的其余内容隔开。

于 2013-09-19T18:45:37.463 回答