Stellen Sie sicher, dass der Container der Tabellenzelle die gesamte Höhe der übergeordneten Zelle ausfüllt
Ich habe versucht, den Inhalt vertikal auszurichten, ohne Flexbox zu verwenden, da es bei unserem Anwendungsfall einige Probleme gab, also habe ich versucht, dies mithilfe einer vertikal ausgerichteten Tabelle zu erreichen, aber das Problem besteht darin, dass der Inhalt darin nicht die verbleibende Höhe ausfüllt Ist dies über CSS möglich? Gibt es eine Möglichkeit, dies zu tun?
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
}