Html 设置父项'；s（未定义的宽度和高度）尺寸等于子尺寸'；s

我有一个未定义宽度或高度的父div

第一个子项“a”已设置宽度和高度。如何使父对象的尺寸标注与子对象的尺寸标注相同

.parent{
位置：固定；
背景：绿色；
填充：10px；
}
.儿童a{
位置：绝对位置；
宽度：300px；
高度：50px；
背景：红色；
}
.child-b{
宽度：100%；
身高：120%；
背景：蓝色；
}

---

这个答案只适用于第二部分，希望能有所帮助：）

要使

高度

百分比起作用，它的父级也必须有一个height属性。看见因此，不能未定义父对象的高度或自动调整其大小

您必须在父对象上设置固定高度，然后使用百分比控制子对象。这就是我要做的，用纯CSS的方式

---

第二部分我将使用javascript，它有一个函数来计算父母身高的120%。如果你愿意，我可以把它作为一个答案贴出来……对你有用吗？使用calc（parentDimensions），您可能会达到您的要求。你能详细说明一下你要解决的问题吗？我应该提到我正在寻找只使用CSS的解决方案。谢谢你。

function childSize () {
 var parentHeight = document.getElementById( HAVE PARENTS ID HERE ).offsetHeight;
 parentHeight = parentHeight / 100 * 120;

 document.getElementById( HAVE CHILD C ID HERE ).offsetHeight = parentHeight;
}

.parent {
  position: fixed;
  background: green;
  padding: 10px;
  width: 300px;
  height: 50px;
}

.child-a {
  position: absolute;
  background: red;
  // set size, padding 10px and centering
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.child-b {
  width: 100%;
  height: 120%;
  background: blue;
}