如何让子div元素实现100%的高度与宽度？

嘿，这个问题我碰到过好多次了，给你整理几种实用的实现方法，每种都配了代码示例，你可以根据自己的场景来选：

这是最直接的方式，但有个前提：父元素必须设置了明确的width和height，不然子元素的100%找不到参照基准，就不会生效。

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

<style>
.parent {
  width: 300px; /* 必须给父元素指定宽度 */
  height: 200px; /* 必须给父元素指定高度 */
  border: 1px solid #ccc;
}
.child {
  width: 100%;
  height: 100%;
  background-color: #42b983;
}
</style>

如果父元素的尺寸是由内容撑开的，或者你不想给父元素写死宽高，可以用定位的方式。父元素设为相对定位，子元素绝对定位后，把top/right/bottom/left都设为0，就能自动填满父元素。

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

<style>
.parent {
  position: relative; /* 作为子元素绝对定位的参照容器 */
  border: 1px solid #ccc;
  padding: 20px; /* 即使有内边距，子元素也能填满除内边距外的空间 */
}
.child {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #42b983;
}
</style>

Flex是现在前端布局的主流方案，用它实现子元素填充满父元素非常简单，而且适配各种父元素尺寸变化的场景。

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

<style>
.parent {
  display: flex; /* 开启Flex布局 */
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}
.child {
  flex: 1; /* 让子元素占据父元素的全部可用空间 */
  background-color: #42b983;
}
</style>

Grid和Flex类似，也是现代CSS布局的利器，实现起来同样简单：

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

<style>
.parent {
  display: grid; /* 开启Grid布局 */
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}
.child {
  /* 甚至不用设置宽高，Grid默认会让子元素填满单元格 */
  background-color: #42b983;
}
</style>

几个关键注意点 #

• 如果父元素是inline类型（比如<span>），要先把它转成block或inline-block，不然子元素的100%宽高不会生效。
• 如果父元素没有设置固定height，而是由内容撑开的，那直接给子元素设height:100%大概率不生效，这时候优先用Flex/Grid或者定位的方法。

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