Html Div未正确调整大小以达到其父级的高度

我正在尝试获取包含要延伸到父分区底部的文本的红色边框。高度100%无法做到这一点。它基本上需要与图像的高度相同

注意：在观看演示时，可能值得缩小浏览器窗口

当3:2图像设置高度时，如何使其大小合适

非常感谢您的帮助

。打开窗口{
宽度：100%；
高度：自动；
显示：块；
浮动：左；
}
.图像img{
显示：块；
宽度：100%；
高度：自动；
保证金：0；
}
.形象{
浮动：左；
背景尺寸：封面！重要；
宽度：45%；
背景位置：中-中！重要；
显示：块；
背景：粉红色；
框大小：边框框；
边框：1px实心#ccc；
边界权：无；
}
.详情{
显示：块；
浮动：左；
宽度：55%；
高度：80px；
框大小：边框框；
边框：1px纯红；
填充：10px；
溢出：隐藏；
}
.标题{
填充：0；
字体大小：14px；
颜色：#333；
}

---

您可以使用Flexbox进行操作：

/*注释掉了不必要的样式*/
*{box size:border box}/*使用*{box size:border box；margin:0；padding:0}在垂直调整大小时，始终保持两者的高度相同*/
html，正文{margin:0}
.窗户{
/*宽度：100%*/
/*高度：自动*/
/*浮动：左*/
display:flex；/*内联显示flex项（子项），默认情况下flex项具有相同的高度，该高度由“最高”项的高度决定/如果您只希望显示：内联flex的宽度，还可以使用display:inline flex*/
}
.图像img{
显示：块；
最大宽度：100%；/*已修改*/
最大高度：100vh；/*垂直响应*/
保证金：0；
}
.形象{
/*浮动：左*/
背景尺寸：封面！重要；
/*宽度：45%*/
背景位置：中-中！重要；
/*显示：块*/
背景：粉红色；
边框：1px实心#ccc；
边界权：无；
}
.详情{
/*flex:1；如果希望它占用剩余的水平空间，请取消注释*/
/*显示：块*/
/*浮动：左*/
/*宽度：55%*/
/*高度：80px*/
边框：1px纯红；
填充：10px；
溢出：隐藏；
}
.标题{
填充：0；
字体大小：14px；
颜色：#333；
}

---

您可以使用Flexbox进行操作：

/*注释掉了不必要的样式*/
*{box size:border box}/*使用*{box size:border box；margin:0；padding:0}在垂直调整大小时，始终保持两者的高度相同*/
html，正文{margin:0}
.窗户{
/*宽度：100%*/
/*高度：自动*/
/*浮动：左*/
display:flex；/*内联显示flex项（子项），默认情况下flex项具有相同的高度，该高度由“最高”项的高度决定/如果您只希望显示：内联flex的宽度，还可以使用display:inline flex*/
}
.图像img{
显示：块；
最大宽度：100%；/*已修改*/
最大高度：100vh；/*垂直响应*/
保证金：0；
}
.形象{
/*浮动：左*/
背景尺寸：封面！重要；
/*宽度：45%*/
背景位置：中-中！重要；
/*显示：块*/
背景：粉红色；
边框：1px实心#ccc；
边界权：无；
}
.详情{
/*flex:1；如果希望它占用剩余的水平空间，请取消注释*/
/*显示：块*/
/*浮动：左*/
/*宽度：55%*/
/*高度：80px*/
边框：1px纯红；
填充：10px；
溢出：隐藏；
}
.标题{
填充：0；
字体大小：14px；
颜色：#333；
}

尝试从

中删除高度。详细信息

然后添加

显示：flex；对齐项目：拉伸为
的样式。打开窗口
并给出
。图像
宽度：100%
尝试从
中删除高度。详细信息
然后添加
显示：flex；对齐项目：拉伸到
的样式。窗口
并给出
。图像
宽度：100%
一种方法是使用flexbox，如另一个答案中所示。另一种方法是将图像放入“详细信息”容器（具有100%宽度或任何所需宽度）中，将图像向左浮动，并将
高度：auto
和
溢出：auto
添加到其容器中，使其包裹图像的完整高度

我删除了以下代码片段中不必要的CSS，并在图像中添加了一个
右边距
，以与文本保持一定距离：


。详细信息{
宽度：100%；
高度：自动；
框大小：边框框；
边框：1px纯红；
溢出：自动；
}
。详情请参阅{
浮动：左；
右边距：20px；
}
.标题{
字体大小：14px；
颜色：#333；
}
一种方法是使用flexbox，如另一个答案中所示。另一种方法是将图像放入“详细信息”容器（具有100%宽度或任何所需宽度）中，将图像向左浮动，并将
高度：auto
和
溢出：auto
添加到其容器中，使其包裹图像的完整高度

我删除了以下代码片段中不必要的CSS，并在图像中添加了一个
右边距
，以与文本保持一定距离：


。详细信息{
宽度：100%；
高度：自动；
框大小：边框框；
边框：1px纯红；
溢出：自动；
}
。详情请参阅{
浮动：左；
右边距：20px；
}
.标题{
字体大小：14px；
颜色：#333；
}

这很常见。如果父母没有定义身高，那么孩子的身高不能为100%，因为父母的原因，即使兄弟姐妹更大，身高也不能为100%，这是很常见的。如果父级未定义高度，则子级的高度不能为100%，因为