关于⽗元素设置min-height，⼦元素设置height100%不⽣效的
问题
<div class="container">
<div class="child"></div>
</div>
<style>
.container {
min-height: 100px;
border: 1px solid;
}
.child {
height: 50%;
background: red;
}
</style>
问题：⼦元素 height 仍然为 0
解决办法
第⼀种： ⽗元素设置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>
第三种： ⽗元素添加 display: grid;
<div class="container">
<div class="child"></div>
</div>
<style>
.container {
width: 100%;
display: grid;
min-height: 100px;
border: 1px solid;
}
.child {
height: 50%;
html的flex布局background: red;
}
</style>
下边的⽅法不贴代码了
第四种：给⼦元素添加 min-height inherit,
这个的问题在于，如果⽗元素的⾼度⽐ min-height ⾼，⼦元素不会⾃动变⾼
第五种：给⽗元素添加 display: flex; flex-direction: column; ⼦元素添加 flex: auto；这个问题在于，没法设置为50%的⾼度。
第六种： display：table； 因为本⼈不喜欢 table，所以你们⾃⼰想怎么添加吧

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。