J'ai essayé d'aligner verticalement le contenu sans utiliser Flexbox, car il y avait quelques problèmes avec notre cas d'utilisation, j'ai donc essayé d'y parvenir en utilisant un tableau aligné verticalement, mais le problème est que le contenu à l'intérieur ne remplit pas la hauteur restante, c'est est-il possible de le faire via CSS. Une manière de faire cela ?
https://jsfiddle.net/s38haqm5/25/
<html>
<body>
<div class="row">
<div class="cell">
<div class="container">
Hello world
</div>
</div>
<div class="cella">
Cell2
</div>
</div>
</body>
</html>
.container {
background-color: red;
height: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
border: 1px solid black;
min-width: 100px;
max-width: 100px;
min-height: auto;
max-height: none;
}
.cella {
display: table-cell;
vertical-align: middle;
border: 1px solid black;
min-width: 100px;
max-width: 100px;
height: 30px;
max-height: none;
}
.row {
display: table
} 
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous devez définir la hauteur du parent. Désormais, votre
.cell没有设置任何高度，因此.containern'a plus aucune valeur pour calculer 100 %. Allez simplement à la même hauteur que.cell添加一些高度，例如.cell {height: 30px;}（就像您在.cella. )Puisque
.cella和.cellest le même, je suppose que vous voudrez peut-être ce petit conseil. Si vous souhaitez que les cellules soient identiques mais que l'une d'entre elles doit être stylée différemment, ajoutez la même classe sur toutes les cellules, puis ajoutez l'identifiant à la cellule qui doit être différente, puis stylisez l'identifiant comme vous le souhaitez. N'oubliez pas qu'une cellule avec classe et identifiant aura une valeur CSS composée de classe et d'identifiant combinés