如何基于子元素aspect-ratio设置网格列尺寸 实现页眉页脚同宽居中

你原有代码的核心问题是网格行尺寸约束缺失，且正方形元素的宽高计算没有扣除页眉、页脚的固定高度，调整CSS即可实现预期效果，不需要修改HTML结构。

最终代码 #

CSS 部分 #

* {
  box-sizing: border-box;
}
body {
  height: 100%;
  margin: 0;
}
html {
  background-color: lightgrey;
  height: 100%;
}
#wrapper {
  display: grid;
  /* 固定页眉、页脚行高，中间内容区占剩余空间，允许收缩 */
  grid-template-rows: 50px minmax(0, 1fr) 50px;
  height: 100%;
  justify-items: center;
}
#footer,
#header {
  background-color: blue;
  height: 50px;
  /* 和中间正方形保持同宽 */
  width: min(100%, calc(100vh - 100px));
}
#paper {
  aspect-ratio: 1;
  background-color: red;
  /* 核心尺寸约束：宽高都不超过可用空间，保持1:1比例 */
  width: min(100%, calc(100vh - 100px));
  max-height: 100%;
  overflow: hidden;
}

HTML 部分（无需改动，沿用原有结构即可） #

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

效果说明 #

• 中间红色区块始终保持1:1正方形比例，永远不会超出父容器可视范围
• 页眉、页脚自动和中间正方形保持统一宽度，三者整体在页面垂直居中
• 视口宽度小于可用高度时，正方形宽度撑满视口，高度随宽度自适应；视口高度小于宽度时，正方形高度撑满扣除页眉页脚后的剩余空间，宽度随高度自适应，完全匹配给出的动态演示效果。

内容的提问来源于stack exchange，提问作者tavoyne