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

小鱼小鱼干

已于 2022-06-16 09:39:27 修改

阅读量1.2k

点赞数 1

文章标签： CSS布局百分比高度 flex布局 position属性 min-height

于 2022-06-16 09:39:24 首次发布

原文链接：https://blog.csdn.net/weixin_42335036/article/details/109102609

版权

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

解决办法
第一种：父元素设置position: relative, 子元素设置 position：absolute

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

第二种：给父元素加一层 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: 50%;
        background: red;
    }
</style>

第四种：给子元素添加 min-height inherit,

这个的问题在于，如果父元素的高度比 min-height 高，子元素不会自动变高

第五种：给父元素添加 display: flex; flex-direction: column; 子元素添加 flex: auto;

这个问题在于，没法设置为50%的高度。

第六种： display：table；

第七种：父元素

,子元素，

height 100%不生效，尝试给父元素设置height 100%，或者body{height:100%;}

————————————————
版权声明：本文为CSDN博主「Zheng One Dream」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42335036/article/details/109102609