CSS 技巧：如何让 div 完美填充 td 高度

引言

一天哈比比突然冒出一个毫无理头的一个问题:

本文就该问题进行展开…

原文链接: 昆仑虚F2E

一、需求说明

大致需求如下, 当然这里做了些简化

有如下初始代码:

• 一个自适应的表格
• 每个单元格的宽度固定 200px
• 每个单元格高度则是自适应
• 每个单元格内是一个 div 标签, div 标签内包裹了一段文本, 文本内容不定

下面是初始代码(为了方便演示和美观, 代码中还加了些背景色、边距、圆角, 这些都是可以忽略):

<table>
  <tr>
    <td width="400">
      <div>
        路由器管理页面路由器管理页面路由器管理页面路由器管理页面路由器管理页面路由器管理页面
        路由器管理页面路由器管理页面路由器管理页面路由器管理页面路由器管理页面路由器管理页面
        路由器管理页面路由器管理页面路由器管理页面路由器管理页面路由器管理页面路由器管理页面
      </div>
    </td>
    <td width="400">
      <div>
        路由器管理页面路由器管理页面路由器管理页面路由器管理页面路由器管理页面路由器管理页面
        路由器管理页面路由器管理页面路由器管理页面路由器管理页面路由器管理页面路由器管理页面
      </div>
    </td>
    <td width="400">
      <div>
        路由器管理页面路由器管理页面路由器管理页面路由器管理页面路由器管理页面路由器管理页面
      </div>
    </td>
  </tr>
</table>
<style>
  table {
    background: #f5f5f5;
  }
  
  td {
    background: #ffccc7;
  }

  table, tr, td {
    padding: 12px;
    border-radius: 4px;
  }

  td > div {
    padding: 12px;
    border-radius: 4px;
    background: #f4ffb8;
  }
</style>

上面代码的整体效果如下:

上面是哈比比目前的现状, 然后需求就是希望, 黄色部分也就是 div 标签能够高度撑满单元格(td), 也就是如下图所示:

二、关键问题

这里我第一反应就是, 既然 td 高度是对的(自适应)的那么 div 高度直接设置 100% 不就好了吗? 事实是这样的吗? 我们可以试下:

<table>
  ...
</table>
<style>
  td > div {
+   height: 100%; 
  }
</style>

实际效果肯定是没有用的, 要不然也就不会有这篇文章了