如何让 CSS 中表格单元格（td）内的 div 自动高度 100%？

css 中表格单元格（td）内的 div 如何自动高度 100%？

在 html 表格中，td 单元格会随着其内容自动调整高度。但在某些情况下，td 内部的 div 无法自动占据 td 的整个高度。

无效的 height: 100% 原因

原因在于 td 本身没有固定的高度，因此无法为其子元素（div）提供百分比高度。

解决方案

1. 为 table 和 tr 设置高度：

   table {
     height: 100vh;
   }
   
   tr {
     height: 100%;
   }

2. 垂直对齐 div：
   如果只需要 div 在 td 中垂直对齐，而不是占据整个高度，可以使用 vertical-align：

   td {
     vertical-align: middle;
   }

3. 浮动 div：
   另一种方法是将 div 设置为浮动：

   div {
     float: left;
   }

4. flexbox：
   还可以使用 flexbox 布局来实现：

   td {
     display: flex;
     flex-direction: column;
     height: 100%;
   }

以上方法都可以实现 div 占据 td 的整个高度或垂直对齐。选择哪种方法取决于实际需求和布局。

以上就是如何让 CSS 中表格单元格（td）内的 div 自动高度 100%？的详细内容，更多请关注其它相关文章！