我嘗試在不使用Flexbox 的情況下垂直對(duì)齊內(nèi)容，因?yàn)槲覀兊挠美嬖谝恍﹩?wèn)題，所以我嘗試使用垂直對(duì)齊的表格來(lái)實(shí)現(xiàn)，但問(wèn)題是裡面的內(nèi)容沒(méi)有填充剩餘的高度，是否可以通過(guò)CSS以某種方式做到這一點(diǎn)？
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
} 
1
0
0
您需要定義父級(jí)高度。現(xiàn)在您的 .cell 沒(méi)有設(shè)定任何高度，因此 .container 沒(méi)有任何值來(lái)計(jì)算 100%。
只需在.cell 中添加一些高度，例如.cell {height: 30px;} （就像您在.cella 上的高度一樣。）
由於 .cella 和 .cell 相同，我假設(shè)您可能需要這一點(diǎn)建議。
如果您希望單元格相同，但其中一個(gè)單元格需要設(shè)定不同的樣式，請(qǐng)?jiān)谒袉卧裆咸砑酉嗤念?lèi)，然後將id 添加到需要不同的單元格，然後根據(jù)您的需要設(shè)置id 的樣式想。請(qǐng)記住，具有 class 和 id 的單元格將具有由 class 和 id 組合而成的 css 值
