关于父元素设置min-height，子元素设置 height 100% 不生效的问题

问题现象

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

<style>
    .container {
        min-height: 100px;
        border: 1px solid;
    }
    .child {
        height: 100%;
        background: red;
    }
</style>

问题：子元素 height 仍然为 0

解决方法

1. 父元素设置position: relative, 子元素设置 position：absolute

同时子元素需要设置 height:100%

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

<style>
    .container {
        min-height: 100px;
        border: 1px solid;
        position: relative;
    }
    .child {
        width: 100%;
        height: 100%;
        background: red;
        position: absolute;
    }
</style>

2. 给父元素加一层 box, 给 box 添加 flex 布局

<div class="box">
    <div class="container">
        <div class="child"></div>
    </div>
</div>

<style>
    .box {
        display: flex;
    }
    .container {
        width: 100%;
        min-height: 100px;
        border: 1px solid;
    }
    .child {
        height: 100%;
        background: red;
    }
</style>

3. 父元素添加 display: grid;

注： 自己采用这个方案解决的问题

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

<style>
    .container {
        width: 100%;
        display: grid;
        min-height: 100px;
        border: 1px solid;
    }
    .child {
        height: 100%;
        background: red;
    }
</style>

转载自: https://blog.csdn.net/weixin_42335036/article/details/109102609