本文介绍一种纯 CSS 解决方案：无需对子元素（.child）设置任何样式，仅通过将父元素（.parent）设为单格网格布局（display: grid），即可使无内容、无样式的子元素自动 100% 填充父容器的宽度与高度。

本文介绍一种纯 css 解决方案：无需对子元素（`.child`）设置任何样式，仅通过将父元素（`.parent`）设为单格网格布局（`display: grid`），即可使无内容、无样式的子元素自动 100% 填充父容器的宽度与高度。

在标准文档流中，一个空的

子元素默认表现为 display: block，其宽高由内容或显式声明决定；若父元素有固定尺寸而子元素既无内容也无样式，则它会坍缩为 0×0 区域——这正是本问题的关键挑战。

核心原理：CSS Grid 的默认行为是将每个直接子元素作为网格项（grid item）放置在第一个可用网格单元中。当父容器仅定义 display: grid（未显式设置 grid-template-rows 或 grid-template-columns）时，浏览器会自动创建一个单行单列的隐式网格，且该网格轨道会完全继承父容器的尺寸。此时，子元素作为唯一的网格项，将自动拉伸（stretch）以填满该轨道——即 100% 宽度与 100% 高度。

✅ 正确实现方式如下：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

.parent {
  display: grid; /* 关键：启用网格布局 */
  width: 200px;
  height: 100px;
  outline: 1px solid red; /* 便于视觉验证 */
}
/* .child 不需要任何样式 —— 零配置生效 */

<div class="parent">
  <div class="child"></div>
</div>

⚠️ 注意事项：

• 父元素必须具有明确的 width 和 height（或由其他上下文提供确定尺寸），否则网格轨道无法获得基准尺寸；
• 不要设置 grid-template-rows / grid-template-columns 为 0、auto（无内容时可能失效）或 min-content 等收缩性值；保持隐式轨道行为最可靠；
• 避免同时使用 float、position: absolute 或 display: inline-block 等会脱离常规布局的属性干扰网格项的 stretch 行为；
• 此方案兼容所有现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+），无需前缀。

相比 Flexbox（需额外设置 align-items: stretch 和 justify-content: stretch，且对空元素偶有兼容差异）或绝对定位（需修改子元素样式），Grid 方案真正实现了「零子元素干预」，语义清晰、代码极简、可靠性高，是解决此类需求的最佳实践。