如何使盒子适合其父母的高度？答案

【问题标题】：How to make a box fit the height of it's parent?如何使盒子适合其父母的高度？
【发布时间】：2016-10-30 21:18:10
【问题描述】：

在纯 CSS 中是否有任何方法可以使方形 div 适合其父级的高度？例如，如果父 div 的宽度为 1000px，但高度为 300px，那么这个子 div 将自动变为 300px x 300px。

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

【问题讨论】：

标签： css

【解决方案1】：

给它height: 100% - 这是指父元素的高度。默认宽度是自动的，所以它会保持正确的比例。

【讨论】：

【解决方案2】：

inherit 属性用于此目的。但是，inherit 关键字指定属性应从其父元素继承其值。因此，使用纯 CSS，您无法做到这一点。例如，

span {
    color: blue;
}

.extra span {
    color: inherit;
}

您不能对孩子说以下话：

.extra span {
   background-color: inherit;
}

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

【讨论】：

【解决方案3】：

您可以尝试不同的方法，使外部父母的高度大小与其孩子的高度相同。

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

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

这样您就可以根据需要调整孩子的大小，例如在本例中是一个高度和宽度为 20vw 的正方形，然后父母的高度将扩展以匹配其孩子。

【讨论】：

vh/vw 不是基于窗口高度/宽度而不是父 div 吗？
是的，你是对的，vh/vw 是基于窗口的。我之所以选择该单元，是因为它可以在不同的屏幕尺寸（如移动设备）上保持方形 div 的外观相同。您可以使用 px 但内部子 div 将是固定大小，因此响应速度较慢。
所以基本上这个解决方案是根据孩子调整父母的大小，而不是让孩子适应父母的身高。孩子是一个 20vw x 20vw 的正方形，而父母变成一个 100% 宽和 20vw 高的矩形。这有助于解决问题吗？
不。我发现了一个重复的问题stackoverflow.com/questions/20707519/…，但我想要一个基于父 div 而不是屏幕大小的 css 答案
父母是否需要特定的尺寸或高度？子方形 div 是否需要特定高度？