纯CSS可以实现这种布局吗？

Question

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

弹出窗口应包括（从上到下）：

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

因为它是一个通用的弹出窗口，所以图像的大小是未知的。图像描述相同。我不想让弹出窗口比视口更大。

如您所见，这并不复杂。

目前我已经使用 javascript（onresize 事件）解决了它。 但是纯CSS会更漂亮。 我玩了一个网格，但它不起作用。我也没有成功使用弹性盒子。也许有人可以解决它...

#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

由于 google chrome 在计算 flexbox 容器中的高度时存在问题（正如stackoverflow question 中明确描述的那样），因此有必要使用额外的包装器来获得与 Firefox 上相同的布局。更新后的代码sn-p如下图：

#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>