如何使一个盒子符合它的父母的高度？

Question

纯CSS中是否有任何方法可以使方形div符合其父级的高度？ 例如，如果父div的宽度为1000px但高度为300px，则此子div将自动变为300px×300px。

我找到了多个div的示例，使用paddingtop从父宽度自动调整高度和宽度但没有基于高度的

Answer 1

inherit属性用于此目的。但是，inherit关键字指定属性应从其父元素继承其值。因此，使用纯CSS，你不能这样做。例如，

span {
    color: blue;
}

.extra span {
    color: inherit;
}

你不能为孩子说出以下内容：

.extra span {
   background-color: inherit;
}

因为父div的background-color属性没有初始值。

Answer 2

只需给它{{1}} - 这是指父元素的高度。默认宽度为auto，因此它将保持正确的比例。

Answer 3

您可以尝试不同的方法，并将外部父母的身高调整为其孩子的身高。

.parent {
   width:100%;
   overflow:auto;
}

.child{
   height:20vw;
   width:20vw;
}

这样你就可以根据自己的意愿调整孩子的大小，在这种情况下说一个高度和宽度为20vw的正方形，然后父母的身高会扩大到与孩子相匹配。