这种布局是否可以使用纯css？

我想在弹出的固定位置div中显示图像

弹出窗口应自上而下包括：

一个固定高度的A元素来关闭弹出窗口，我稍后会用一个更漂亮的关闭按钮来替换它。 img元素。图像应尽可能大，但决不能超过其原始大小。此外，图像描述点3必须始终保持可见。 仅显示图像描述文本。必须和它的内容一样高。 因为它是一个普通的弹出窗口，所以图像的大小是未知的。图像描述也一样。我不想让弹出窗口比视口大

正如你所看到的，它并没有那么复杂

目前我已经用javascript onresize事件解决了这个问题。 但是纯css会更漂亮。 我玩了一个网格，但它不工作。我也没有成功地使用flex box。也许有人能修好它

网格 { 显示：网格； 网格模板列：1fr； 网格模板行：自动； 位置：固定； 排名：0； 右：0； 左：0； 背景：黄色； 最大高度：100%； } 头 { 高度：20px； 文本对齐：居中； 背景：橙色； } img { 保证金：0自动； } 页脚 { 文本对齐：居中； 背景：绿色； } 这是图像描述。

---

使用简单的flexbox布局可以获得所需的结果：

网格 { 显示器：flex； 弯曲方向：立柱； 位置：固定； 排名：0； 右：0； 左：0； 背景：黄色； 最大高度：100%； } 头 { 高度：20px； 文本对齐：居中； 背景：橙色； } img { 保证金：0自动； } 页脚 { 文本对齐：居中； 背景：绿色； } 这是图像描述。

---

目前我已经用javascript解决了这个问题，javascript在哪里？如果我们能看到它目前的工作情况，这会有所帮助。添加了js版本。谢谢，但有一个问题。在Firefox中，它可以完美地工作。但是Chrome似乎忽略了100%的最大高度。我用解决方案更新了答案，解决了Chrome上的问题。仍然不一样。如果有太多的垂直空间，那么图像和页脚/页眉之间就会有空间。这里是一个屏幕截图：我做了另一个更新，请看看额外的更改是否给出了令人满意的结果。