html - 如果父 div 有 "min-height"，如何强制内部 div 的高度等于父 div 的高度？

Question

为什么在下面的示例中，内部 div 的高度与 wrapper 的 div 不同？

Live demo here.

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。

Answer 1

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

min-height: inherit;