为什么父母的最小身高不会阻止100％身高的孩子崩溃

Question

Jsfiddle： http://jsfiddle.net/techsin/csfvb91u/6/

例如，采用如下布局：

<div class="cont">
    <div class="a"></div>
</div>

CSS

.a {
    background-color: blue;
    height: 100%;


}
.cont {
    min-height: 300px;
    border:1px solid;
}

我希望div.a的大小为.cont，因为min-height设置为300px。然而，这不是我得到的。 .a折叠并完全忽略高度100％UNLESS .cont是明确设置的。例如：身高300px;没有分钟。

为什么会出现这种有缺陷的行为？我需要理解推理..我怎样才能克服它。

Answer 1

你必须在.a类

中使用min-height：inherit

.a {
  background-color: blue;
  min-height: inherit;
   }

Link