css - 根据 child 的长宽比调整网格列的大小

Question

我的问题类似于this one :我试图在其父元素中包含 aspect-ratio 元素。但有一点不同，这个纵横比元素有同级元素——页眉和页脚——而且所有这些漂亮的元素都应该居中对齐并共享共同的宽度。

图像胜过一千个文字:

GIF 胜过一千张图片:

我已经接近这个结果，但还没有完全实现:

body {
  height: 100%;
  margin: 0;
}

html {
  background-color: lightgrey;
  height: 100%;
}

#footer,
#header {
  background-color: blue;
  height: 50px;
}

#paper {
  aspect-ratio: 1;
  background-color: red;
  margin: auto;
  max-height: 100%;
  overflow: hidden;
  width: 100%;
}

#wrapper {
  align-content: center;
  display: grid;
  height: 100%;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="paper"></div>
  <div id="footer"></div>
</div>

有 CSS 向导可以帮助我吗？

Answer 1

尝试这个解决方案，所有的魔力都发生在 grid-template-columns 和 grid-template-rows 中。

html {
  background-color: lightgrey;
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

#wrapper {
  --footer-header-height: 50px;
  align-content: center;
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr minmax(auto, calc(100vh - var(--footer-header-height) * 2)) 1fr;
  grid-template-rows: auto minmax(auto, 100vw) auto;
}

#footer,
#header {
  grid-column: 2;
  background-color: blue;
  height: var(--footer-header-height);
}

#paper {
  grid-column: 2;
  aspect-ratio: 1 / 1;
  background-color: red;
}

<div id="wrapper">
  <div id="header"></div>
  <div id="paper"></div>
  <div id="footer"></div>
</div>