前端学习笔记 - 元素铺满整个父元素

在CSS中，让一个元素铺满整个父元素（如下图），可以通过以下方法实现：

1. 使用position

通过设置position: absolute以及四个边距为0，元素会相对于父元素完全覆盖。

.outer {
    position: relative;
}

.inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

⚠️注意：

1. 父元素需要设置position: relative，以便子元素以父元素为参考。否则，子元素将会以最近的拥有定位属性（非static）的祖先元素为参考。
2. 此方式不能设置子元素的宽高。

2. 计算height的值

设置高度为100%-2*(border+padding)，子元素可以填满整个父元素。

.inner {
    border: 5px solid gray;
    padding: 10px;
    height: calc(100% - 30px);
}

3. 使用box-sizing

通过设置box-sizing: boder-box以及宽高为100%，子元素可以填满整个父元素。

.inner {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

4. 使用flex模式

通过设置父元素display: flex以及子元素flex-grow: 1值，子元素可以填满整个父容器

.outer {
    display: flex;
}
.inner {
    flex-grow: 1;
}

⚠️注意：此方式不能设置子元素的高度。这里的技巧其实是借用侧轴默认对齐方式（stretch）对元素进行拉伸。