HTML元素全屏填充容器的CSS技巧

• 必须确保从 html 和 body 开始逐级设高：

  html, body {
    height: 100%;
    margin: 0;
  }
  .container {
    height: 100%;
  }

• 更稳妥的做法是用 min-height: 100vh，vh 单位不依赖父容器高度，直接基于视口
• 注意：iOS Safari 对 100vh 的处理有 bug（地址栏收放时高度会错），必要时改用 100dvh（支持现代浏览器）

position: absolute 撑满的边界条件

绝对定位元素通过四边偏移可以强制撑满父容器，但前提是父容器得是「定位上下文」——即 position 值不能是 static（默认值）。

• 父容器需设 position: relative、absolute 或 fixed
• 子元素设：

  .full-cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

• 如果父容器本身没高度（比如空
  ），即使绝对定位也看不见——它仍需要一个有尺寸的包含块
• 慎用在 Flex/Grid 容器内：绝对定位会脱离布局流，可能破坏原有排列逻辑

Flex 布局下让子项撑满剩余空间

当父容器是 display: flex，且已有其他子元素时，单靠 flex: 1 就能让某子项占满剩余空间，比手动算高度更健壮。

• 父容器需设 flex-direction: column（垂直布局）或保持默认 row（水平）
• 目标子项加：

  flex: 1;

  —— 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0
• 若只想撑高不撑宽，用 flex: 1 1 auto 并配合 width: 100%；反之亦然
• 注意：如果兄弟元素设置了固定高度（如 height: 60px），flex: 1 才能正确分配剩余空间；否则所有子项都 flex: 1 会均分

Grid 布局中用 1fr 实现自适应撑满

Grid 天然适合“划分区域+自动填充”，比百分比或 vh 更可控，尤其适合多栏或头部/主体/底部结构。

• 父容器设 display: grid 和明确的轨道定义，例如：

  .layout {
    display: grid;
    grid-template-rows: 60px 1fr 40px;
    height: 100vh;
  }

• 1fr 表示“剩余可用空间的一份”，多个 1fr 会等分；2fr 则占两份
• 不用给子元素单独设高，Grid 自动按轨道分配尺寸
• 兼容性注意：IE11 支持 Grid 但语法不同（需用 -ms-grid），如需兼容得降级处理

终于介绍完啦！小伙伴们，这篇关于《HTML元素全屏填充容器的CSS技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！