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;
}

我还应用了插入框阴影，它可以替代在元素中应用边框（在这种情况下，单元格），正如您在评论中提到的那样，您的内容div也有边框。

<强> Working Fiddle

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 希望它有所帮助

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

3 个答案: