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
} 
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您需要定义父级高度。现在您的
.cell没有设置任何高度，因此.container没有任何值来计算 100%。 只需向.cell添加一些高度，例如.cell {height: 30px;}（就像您在.cella上的高度一样。）由于
.cella和.cell相同，我假设您可能需要这一点建议。 如果您希望单元格相同，但其中一个单元格需要设置不同的样式，请在所有单元格上添加相同的类，然后将 id 添加到需要不同的单元格，然后根据您的需要设置 id 的样式想。请记住，具有 class 和 id 的单元格将具有由 class 和 id 组合而成的 css 值