纯CSS可能会出现这种布局吗？

Question

我想在弹出窗口中显示图像（固定位置的div）。

弹出窗口由（从上到下）组成：

1. 固定高度的“ a”元素可关闭弹出式窗口（我稍后将使用更漂亮的关闭按钮来代替它）。
2. 一个img元素。图像应尽可能大，但不得大于其原始大小。此外，图像说明（第3点）必须始终保持可见。
3. 图像说明（仅文本）。必须与其内容一样高。

因为它是通用弹出窗口，所以图像大小未知。图片说明也一样。我不想使弹出窗口的大小大于视口。

如您所见，它并不那么复杂。

目前，我已经使用javascript（onresize事件）解决了该问题。 但是纯CSS会更漂亮。 我在网格上玩耍，但是没有用。 Flex Box也没有成功。也许有人可以修复它...

#grid
{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    position:fixed;
    top:0;
    right:0;
    left:0;
    background:yellow;
    max-height:100%;
}

#head
{
    height:20px;
    text-align:center;
    background:orange;
}

#img
{
    margin:0 auto;
}

#footer
{
    text-align:center;
    background:green;
}

<div id="grid">
    <a id="head" href="#" onclick="document.getElementById('grid').style.display='none';">close</a>
    <img id="img" src="https://i.postimg.cc/1tdZsLn3/1554503066.png" />
    <div id="footer">This is the image description.</div>
</div>

这是有效的javascript版本：

function MyFoto() // create class
{
}

MyFoto.adjust =
function()
{
    var _w = document.getElementById("container").clientHeight - 50 - document.getElementById("info").clientHeight; // 50 = close button + some more
    document.getElementById("img").style.maxHeight = (_w < 1 ? 1 : _w).toString() + "px";
};

MyFoto.close =
function()
{
    document.getElementById("container").style.display = "none";
    return false;
};

window.onresize = MyFoto.adjust;
MyFoto.adjust();

#container
{
    top:0;
    right:0;
    bottom:0;
    left:0;
    position:fixed;
    background-color:rgba(0,0,0,0.7);
    text-align:center;
}

#a
{
    display:block;
}

#img
{
    vertical-align:bottom; /* removes space under image */
    max-width:100%;
    background:white;
}

<div id="container">
  <a id="a" href="#" onclick="return MyFoto.close()">close</a>
  <img id="img" alt="img" src="https://i.postimg.cc/1tdZsLn3/1554503066.png" />
  <div id="info">Photo description!</div>
</div>

Answer 1

使用简单的flexbox布局应会为您提供所需的结果：

#grid
{
    display:flex;
    flex-direction: column;
    position:fixed;
    top:0;
    right:0;
    left:0;
    background:yellow;
    max-height:100%;
}

#head
{
    height:20px;
    text-align:center;
    background:orange;
}

#img
{
    margin:0 auto;
}

#footer
{
    text-align:center;
    background:green;
}

<div id="grid">
    <a id="head" href="#" onclick="document.getElementById('grid').style.display='none';">close</a>
    <img id="img" src="https://i.postimg.cc/1tdZsLn3/1554503066.png" />
    <div id="footer">This is the image description.</div>
</div>

更新1

由于谷歌浏览器在计算flexbox容器中的高度时存在问题（如本stackoverflow question中所述），因此有必要使用附加的包装程序来获得与Firefox相同的布局。更新后的代码段如下所示：

#grid
{
    display:flex;
    flex-direction: column;
    position:fixed;
    top:0;
    right:0;
    left:0;
    background:yellow;
    max-height:100%;
}

#head
{
    height:20px;
    text-align:center;
    background:orange;
}

#img
{
    margin:0 auto;
    object-fit: contain;
    max-width: 100%;
}

#footer
{
    text-align:center;
    background:green;
}

.img-wrapper {
    display: flex;
    min-height: 0;
}

<div id="grid">
    <a id="head" href="#" onclick="document.getElementById('grid').style.display='none';">close</a>
    <div class="img-wrapper">
      <img id="img" src="https://i.postimg.cc/1tdZsLn3/1554503066.png" />
    </div>
    <div id="footer">This is the image description.</div>
</div>

更新2

使Chrome的修复功能更强大。

#grid
{
    display:flex;
    flex-direction: column;
    position:fixed;
    top:0;
    right:0;
    left:0;
    background:yellow;
    max-height:100%;
}

#head
{
    height:20px;
    text-align:center;
    background:orange;
}

#img
{
    margin:0 auto;
    object-fit: contain;
    max-width: 100%;
    min-height: 0;
}

#footer
{
    text-align:center;
    background:green;
}

.img-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

<div id="grid">
    <a id="head" href="#" onclick="document.getElementById('grid').style.display='none';">close</a>
    <div class="img-wrapper">
      <img id="img" src="https://i.postimg.cc/1tdZsLn3/1554503066.png" />
    </div>
    <div id="footer">This is the image description.</div>
</div>