CSS Bootstrap 3 - 按钮高度匹配面板 (CSS3)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18901854/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - Button height match panel (CSS3)
提问by Diode Dan
EDITFor 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
编辑对于那些你绊倒这篇文章中，我发现有一个“新”标准称为Flexbox的。这允许你做我想做的事：Flexbox 演示
I am trying to get the following effect:
我试图获得以下效果：
However, I get this:
但是，我明白了：
See jsFiddle: http://jsfiddle.net/abehnaz/8sPn7/3/
参见 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).
我height: 100%在 CSS 中尝试过，但我没有运气。我认为这可能与按钮样式优先于高度设置的事实有关，或者面板根据其内容（在本例中为图像）采用动态高度。
Is there a cross-browser/pure CSS way to make the button height match the panel height (with appropriate padding and fitting of content?)
是否有一个跨浏览器/纯CSS的方法，使按钮的高度匹配面板高度（用适当的填充和内容接头？）
Thanks!
谢谢！
HTML:
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:
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-lgclass.
**编辑：** 为了得到一个可以接受的解决方案，我最终使用了媒体对象中的按钮。它不会自动适应整个高度，但它可以完成工作。它有助于应用.btn-lg课程。
采纳答案by John Lieb-Bauman
In order for the browser to understand what 100% actually represents, you must give the containing div, in this case your media-objectdiv, a height orhave allparent divs have height 100%.
为了让浏览器理解 100% 实际代表什么，你必须给包含的 div，在这种情况下你的media-objectdiv，一个高度或让所有父 div 的高度为 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.
这样想，浏览器需要一些数字来启动 100%，当所有父 div 都有height: 100%;它时，它使用这个数字的视口（窗口大小）。如果您曾经尝试制作粘性页脚，您可能会遇到类似的问题。
Here is a jsfiddle with a specified height: http://jsfiddle.net/8sPn7/5/
这是一个具有指定高度的 jsfiddle：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/
这是另一个 jsfiddle，所有东西的高度都是 100%（一种向您展示 100% 规则的快速肮脏方式）：http: //jsfiddle.net/8sPn7/6/
回答by Fifi
Bootstrap 4 :add these classes d-flex align-items-stretchin the parent div.
Bootstrap 4：d-flex align-items-stretch在父 div 中
添加这些类。
回答by user1618143
Depending on your exact goal, this may not help, but adding height:100pxto the containing divmakes your height:100%work as expected. It looks like when the divexpands to hold the image, that expansion isn't being carried through to the button like you'd expect.
根据您的确切目标，这可能无济于事，但添加height:100px到容器中div会使您height:100%按预期工作。看起来当div展开以容纳图像时，该展开并没有像您期望的那样传递到按钮。
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-leftor something to space the rest of the content around it.
固定高度的另一件事是将按钮设置为position:absolute... 但这很愚蠢且无济于事，除非它恰好是一个固定宽度的按钮，并且您可以添加 amargin-left或其他内容以将其周围的其余内容隔开。
