最小高度有什么问题？

Question

简单小提琴here。

为什么min-height没有按照你想象的方式工作，实际上根据文档也没有？

为什么这个div不能填满100px×100px的盒子？

HTML：

<div class="div1"><div class="div2"></div></div>

CSS：

.div1 {
  min-height: 100px;
  width: 100px;
}

.div2 {
  height: 100%;
  width: 100%;
  background: red;
}

为什么height有效而不是min-height？

Answer 1

这里的问题是% height对于div2而不是min-height。

百分比高度：

  

百分比是根据生成的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值计算为auto。

<子>的 MDN Height

因此，您需要一个固定值来引用div1，或者您可以div2绝对：

＆＃13;

＆＃13;

.div1 {
    min-height: 100px;
    width: 100px;
    position:relative;
}

.div2 {
    position:Absolute;
    height: 100%;
    width: 100%;
    background: red;
}

＆＃13;

<div class="div1"><div class="div2"></div></div>

＆＃13;

＆＃13;

＆＃13;