CSS:使一个块元素填充父元素的整个空间？

Question

我试图在一个<th>元素中放置一个链接,并让<a>元素填充整个空间<th>.虽然我可以让它以宽度:100%水平填充,但让它垂直填充会被证明是麻烦的.身高:100%似乎没有效果.

我想这样做,以便用户可以单击单元格中的任何位置来激活链接.我知道我可以在<th>自己上面放一个onClick属性并通过javascript处理它,但我想用"正确"的css方式来做.

澄清:表格的每一行都可以有不同的高度,因为内容是动态的,因此对于<a>或<th>元素使用固定高度的解决方案将不起作用.

以下是一些示例代码:

<style type="text/css">
th {
  font-size: 50%;
  width: 20em;
  line-height: 100%;
}
th a {
  display:block;
  width:100%;
  height:100%;
  background-color: #aaa;
}
th a:hover {
  background-color: #333
}
</style>
<table border=1>
  <tr>
    <th><a href="foo">Link 1</a></th>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor.</td>
  </tr>
  <tr>
    <th><a href="foo">Link 2</a></th>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus tortor. </td>
  </tr>
</table>

这是一个完全相同代码的页面

正如您所看到的那样,如果将鼠标悬停在链接上,则<a>元素不会垂直填充,从而产生难看的外观.我可以通过将其置于" th:hover a "样式来修复悬停背景,但是如果单击实际a标记所在的位置,链接仍然只能实际起作用.

Answer 1

只是改变这种风格

th {
  font-size: 50%;
  width: 20em;
  height: 100%;
  line-height: 100%; 
}

干杯