如何用纯CSS让div.child占div.parent100%宽高且不设子元素样式

要实现空的.child元素占满.parent的100%宽高，且不给.child添加任何样式，只需要修改.parent的布局方式即可，推荐使用Grid布局，具体实现如下：

完整代码 #

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

.parent {
 width: 200px;
 height: 100px;
 outline: 1px solid red;
 display: grid;
}

原理说明 #

Grid布局容器的默认属性中：

• justify-items: stretch：子元素会在水平方向拉伸，填满所在网格单元格的宽度
• align-items: stretch：子元素会在垂直方向拉伸，填满所在网格单元格的高度
• 当未显式定义网格轨道时，容器会自动创建一个包含单个单元格的网格，该单元格的大小匹配容器的宽高，因此空的.child元素会自动拉伸填满整个父容器。

另外也可尝试Flex布局的特殊写法（注意兼容性，justify-content: stretch属于较新属性）：

.parent {
 width: 200px;
 height: 100px;
 outline: 1px solid red;
 display: flex;
 justify-content: stretch;
 align-items: stretch;
}

不过旧浏览器可能不支持该属性，因此Grid布局是更稳妥的选择。

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