如果父 div 具有“最小高度”，如何强制内部 div 的高度等于父 div 的高度？

Question

为什么在下面的示例中，内部 div 的高度不像包装器的 div ？

现场演示在这里。

HTML:

 <div class="wrapper">
    <div class="inner">Hello</div>
    <div class="inner">Peace</div>
</div>

CSS：

 .wrapper {
    background-color: #000;
    min-height: 100px;
}
.inner {
    display: inline-block;
    background-color: #777;
    height: 100%;
}

如果我将 min-height: 100px; 更改为 height: 100px; ，那么它看起来没问题。但是，就我而言，我需要 min-height 。

原文由 Misha Moroshko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我相信这是你想要的输出：http: //jsfiddle.net/xhp7x/

 .wrapper {
    display: table;
    background-color: #000;
    height: 100px;
    width: 100%;
}
.wrapper2 {
    height: 100%;
    display: table-row
}
.inner {
    height: 100%;
    display: inline-block;
    background-color: #777;
    margin-right: 10px;
    vertical-align: top;
}

必须添加第二个 DIV wrapper2。

在 chrome 和 firefox 上测试。

原文由 ariel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

CSS 中的某些属性会自动继承父级的值，而有些则不会。当您希望它继承父项的值时，必须明确说明最小高度：

 min-height: inherit;

原文由 mystrdat 发布，翻译遵循 CC BY-SA 3.0 许可协议