我有一張桌子，上面有不同高度的列。現在我想將列中的容器（深粉色）拉伸到它們父母的全高。
問題：絕對定位專案或僅使用彈性框而不是表格不是解決方案。是否有唯一的 CSS 解決方案可以將容器拉伸到其父級的全高？
td {
background-color: deepskyblue;
width: 30px;
}
.container {
display: flex;
flex-direction: column;
background-color: deeppink;
text-align: center;
// code below not working
align-items: stretch;
justify-content: space-between;
height: 100%;
}<table>
<td>
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</td>
<td>
<div class="container">
<p>1</p>
</div>
</td>
<td>
<div class="container">
<p>1</p>
<p>2</p>
</div>
</td>
</table>感謝您的幫助，非常感謝！<3
uj5u.com熱心網友回復：
您只需要給表格單元格一個高度（由于表格單元格的作業方式，它應該無論如何都會擴展）但是如果它有一個高度，則 flex 容器可以采用 100% 的高度
td {
background-color: deepskyblue;
width: 30px;
height: 1px;
}
.container {
display: flex;
flex-direction: column;
background-color: deeppink;
text-align: center;
justify-content: space-between;
height: 100%;
}<table>
<td>
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</td>
<td>
<div class="container">
<p>1</p>
</div>
</td>
<td>
<div class="container">
<p>1</p>
<p>2</p>
</div>
</td>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/432842.html
上一篇：輸入文本框獲得焦點時有邊框