Question

我的问题与this one不重复，因为在我的情况下，我使用的是min-height属性，其效果与普通height略有不同。

我的问题是this one的更高级版本，并且涉及min-height属性的违反直觉的CSS行为。我想将孩子的身高设置为min-height属性设置的父亲身高的80％。如下所示，我们可以通过继承min-height值来设置父级高度的100％，但我不能以较小的百分比来执行此操作。当然，我不想明确地为我的孩子设置100px。

.parent {
  min-height: 100px;
  width: 100%;
  background-color: green;
}
.child {
  width: 30%;
  background-color: blue;
}
#c1 {
  min-height: inherit; /* =100% of parent's height*/
}
#c2 {
  min-height: 80%; /* doesn't work */
}

<div class='parent'>
  <div id='c1' class='child'></div>
</div>
<br>
<div class='parent'>
  <div id='c2' class='child'></div>
</div>

Answer 1

您必须将position: relative用于父级，将position: absolute用于子级

＆＃13;

.parent {
  min-height: 100px;
  width: 100%;
  background-color: green;
  position: relative;
}

.child {
  width: 30%;
  background-color: blue;
  position: absolute;
}

#c1 {
  min-height: inherit;
  /* =100% of parent's height*/
}

#c2 {
  min-height: 80%;
}

＆＃13;

<div class='parent'>
  <div id='c1' class='child'></div>
</div>
<br>
<div class='parent'>
  <div id='c2' class='child'></div>
</div>

＆＃13;

让孩子的父母身高的x％由最小身高设定

1 个答案: