如何使div占据没有固定TD高度的html表格单元格的高度的100％？

Question

我有一个html表，并且在一个单元格内有一个div

<td>
      <div class=content>some content</div>
</td>
<td>
      <div class=content>some content<br/>some content<br/>some content<br/></div>
</td>

某些单元格中的某些内容为多行，并且div具有背景色，因此我希望视图是统一的，因此我希望内容较少的div仍保持相同的高度以覆盖整个td。

我试着做

.content
{
    height:100%;
}

但这似乎并没有改变任何东西。

Answer 1

高度是动态属性，根据内容适用。 因此，您无法将其设置为百分比。 但是，如果父项的身高固定，则子项的身高属性可以用百分比表示。 在这里，设置一些静态的td高度，以便可以使用div高度（以百分比为单位）。

Answer 2

不要将背景应用于内容div，而应将其应用于td单元格本身。

td {
    background-color: cornflowerblue;
    -webkit-box-shadow: inset 0px 0px 5px 0px rgba(255, 0, 0, 1);
    -moz-box-shadow: inset 0px 0px 5px 0px rgba(255, 0, 0, 1);
    box-shadow: inset 0px 0px 5px 0px rgba(255, 0, 0, 1);
    padding: 5px;
}

我还应用了inset box-shadow，它可替代在元素（ 在本例中为cell ）内应用边框，正如您在注释中提到的，内容div也具有边框。

工作小提琴

Answer 3

可能的问题是您没有在类属性中使用Quotes

这是我的代码

<table>
  <tr>
    <td>
      <div >some content</div>
</td>
<td>
      <div>some content<br/>some content<br/>some content<br/></div>
</td>
  </tr>
</table>

在这里查看JSBIN希望对您有所帮助