如何用CSS实现顶栏-主内容-底栏布局且内嵌表格保持正方形

原有代码未达预期的核心问题有两个：一是Grid行高写死为百分比比例，不符合「底部固定高度、顶部自适应、中间占剩余空间」的规则；二是正方形表格的尺寸约束逻辑错误，绝对定位还会遮挡普通占位内容。

按以下规则调整即可满足全部要求：

• 外层主容器使用Grid布局，行模板设置为auto 1fr 80px（80px可替换为你需要的底部栏固定高度值），高度设为100vh，默认块级元素会自动占满全宽，无需额外设置宽度属性。该配置下顶部栏会随自身内容自适应高度，底部栏保持固定高度，中间主内容占位区自动占满剩余所有视口高度，三者整体刚好撑满整个视口。
• 主内容占位区设置为Flex布局，配置水平+垂直居中对齐，同时不要给子元素加绝对定位，避免普通内容被表格遮挡，也保证占位区本身尺寸不会被子元素撑大。
• 正方形表格仅需配置三个属性：aspect-ratio: 1/1强制正方形比例、max-width: 100%、max-height: 100%，浏览器会自动选取当前可用宽度、可用高度中的较小值作为表格边长，完全符合尺寸自适应要求。

修正后的完整可运行代码如下：

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%;margin:0;">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    .main {
      background: gray;
      height: 100vh;
      /* 行规则：顶部自适应 | 中间占剩余 | 底部固定高度 */
      grid-template-rows: auto 1fr 80px;
      display: grid;
    }
    
    .top {
      background: red;
      padding: 12px;
    }
    
    .placeholder {
      background: green;
      /* flex居中保证表格始终在区域内居中 */
      display: flex;
      align-items: center;
      justify-content: center;
      /* 溢出裁剪防止内容撑破容器 */
      overflow: auto;
      padding: 12px;
    }
    
    .square-table {
      background: yellow;
      /* 强制正方形 */
      aspect-ratio: 1/1;
      /* 自动取宽高较小值 */
      max-width: 100%;
      max-height: 100%;
      border-collapse: collapse;
    }
    .square-table td {
      border: 1px solid #000;
      padding: 8px;
    }
    
    .bottom {
      background: blue;
      padding: 12px;
    }
  </style>
</head>
<body style="height: 100%;">
  <div class="main">
    <div class="top">Top bar（高度随内容自适应）</div>
    <div class="placeholder">
      <!-- 普通内容和表格二选一渲染即可，同时放也不会溢出 -->
      <!-- <p>Generic placeholder 普通内容占位</p> -->
      <table class="square-table">
        <tbody>
          <tr>
            <td>正方形表格</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="bottom">Bottom bar（固定高度）</div>
  </div>
</body>
</html>

自行调整窗口大小即可验证效果：不管视口是宽屏还是窄屏，表格都会自动保持正方形，且永远不会超出主内容区范围；顶部栏内容变多会自动加高，底部栏始终保持固定高度，三者始终撑满整个视口。

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