<div class="container">
<div class="child"></div>
</div>
<style>
.container {
min-height: 100px;
border: 1px solid;
}
.child {
height: 50%;
background: red;
}
</style>Problema: la altura del elemento secundario sigue siendo 0
Solución
El primero: posición del conjunto de elementos principal: relativa, posición del conjunto de elementos secundarios: absoluta
<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>El segundo: agregue una capa de cuadro al elemento principal y agregue un diseño flexible al cuadro
<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>El tercero: agregue display: grid al elemento principal;
<div class="container">
<div class="child"></div>
</div>
<style>
.container {
width: 100%;
display: grid;
min-height: 100px;
border: 1px solid;
}
.child {
height: 50%;
background: red;
}
</style>El siguiente método no pega el código.
El cuarto tipo: agregue la herencia de altura mínima al elemento secundario,
El problema con esto es que si la altura del elemento principal es mayor que la altura mínima, el elemento secundario no será automáticamente más alto
Quinto: agregue display: flex; flex-direction: column al elemento principal; agregue flex: auto; al elemento secundario
El problema con esto es que no se puede configurar a una altura del 50%.
Sexto: pantalla: mesa;