CSS Grid移动端失效求助：图片占满空间致底部文字不可见

太懂这种“看似简单却卡半天”的坑了！你要的「图片占满剩余空间，文字固定在底部」布局，桌面端好实现，但移动端尤其是旧版浏览器（比如Chrome 65）确实容易出问题，核心是视口高度计算、flex布局兼容性、图片尺寸控制这几个点没处理到位。

先给你一个经过移动端兼容验证的可行方案： #

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 强制根元素和body占满整个视口高度 */
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    /* 容器用垂直方向的flex布局 */
    .layout-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
    }
    /* 图片占据容器剩余全部空间 */
    .layout-container img {
      flex: 1;
      width: 100%;
      /* 让图片按比例缩放，避免拉伸或溢出 */
      object-fit: cover;
      /* 兼容旧版webkit内核浏览器 */
      -webkit-object-fit: cover;
    }
    /* 底部文字禁止被压缩，固定在底部 */
    .bottom-text {
      flex-shrink: 0;
      padding: 1.2rem;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div class="layout-container">
    <img src="你的图片地址" alt="图片描述">
    <div class="bottom-text">这里是需要固定在底部的文字内容</div>
  </div>
</body>
</html>

为什么之前的方案在移动端失效？ #

• 视口高度未明确：移动端浏览器默认不会让body自动占满视口高度，必须显式设置html, body { height: 100%; }，否则flex容器的高度无法正确继承，导致图片撑满整个视口挤压文字。
• 文字被flex压缩：如果没给底部文字加flex-shrink: 0，flex布局会优先压缩文字空间来适配图片，最终导致文字几乎不可见。
• 图片缩放未控制：图片默认按原始尺寸渲染，即使设置了flex:1，没有object-fit的话，图片要么拉伸变形，要么溢出容器，直接占满整个屏幕。
• 旧版浏览器兼容：Chrome 65属于较老版本，对object-fit这类属性需要加-webkit-前缀才能正常生效。

额外优化建议： #

如果底部文字高度不固定，直接去掉任何硬编码的高度限制，flex会自动根据文字高度分配剩余空间给图片；测试时一定要确保viewport meta标签正确设置，否则移动端布局会被缩放打乱。

内容的提问来源于stack exchange，提问作者Ramon de Klein