CSS:让一个块元素填充父元素的整个空间?

I am trying to put a link in a <th> element and have the <a> element fill the entire space of the <th>. While I can get it to fille horizontally with width:100%, getting it to fill vertically is proving to be troublesome. height:100% seems to have no effect.

我试图在< >元素中加入一个链接，让元素填满< >的整个空间。虽然我可以让它水平地填满宽度:100%，但是让它垂直填满是很麻烦的。身高:100%似乎没有影响。

I want to do this so that the user can click anywhere in the cell to activate the link. I know I could put an onClick property on the <th> itself and handle it via javascript, but I would like to do it the "proper" css way.

我想这样做，以便用户可以单击单元格中的任何位置来激活链接。我知道我可以在< >上放置一个onClick属性，并通过javascript处理它，但是我希望使用“合适”的css方式。

Clarification: Each row of the table can have a different height because the content is dynamic, so solutions that use a fixed height for the <a> or <th> elements will not work.

说明:由于内容是动态的，所以表中的每一行都可以有不同的高度，因此对于或< >元素使用固定高度的解决方案将不起作用。

Here is some sample code:

以下是一些示例代码:

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

And here is a page with that exact same code

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

As you can see if you mouseover the link, the <a> element is not filling vertically which produces an awkward look. I could fix the hover background by putting it in a "th:hover a" style, but the link would still only actually function if you clicked where the actual a tag is.

正如您所看到的，如果鼠标移到链接上，元素不是垂直填充，这会产生一种尴尬的外观。我可以将鼠标悬停设置为“th:hover a”样式，但只有当你点击标签所在的位置时，链接才会真正起作用。

7 个解决方案

#1

just change th style to this

只要把样式改一下就可以了

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

cheers

干杯

#2

As @Hober says, you need to give the <th> a height. You could also use height: 100% there.

正如@Hober所说，你需要给一个高度。你也可以使用高度:100%。

If you know the dimensions of your <th>, which it looks like you probably won't in this case (since they're on the side), I've had luck adding a padding to push the <a> out to the edges (past any padding from the <th> itself), and then bringing it back in with a corresponding negative margin. Like this:

如果你知道你< th >的维度,它看起来像你可能不会在这种情况下(因为它们的),我有运气添加填充将 <一> 的边缘(过去的任何填充< th >本身),然后把它与一个相应的负利润。是这样的:

th a{
  padding: 10px 0;
  margin: -10px 0;
}

#3

In order to do this, you can set the HEIGHT of your "a" element in pixels instead of percentage.

为此，可以将“a”元素的高度设置为像素，而不是百分比。

If you specify a percentage, 100% will end up being the height of the TEXT itself.

如果您指定一个百分比，100%将最终成为文本本身的高度。

A pixel height will give you a static height, and will work for this situation.

一个像素高度会给你一个静态高度，并将为这种情况工作。

td a {height: 100px;}

#4

You need to give the <th> a height, so that your style block will end up something like

您需要为设置一个高度，这样您的样式块将以类似的方式结束

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

Edit: Actually, for height you should probably use a vertical measure like "ex", instead of a horizontal measure of "em". Example changed to reflect that.

编辑:实际上，对于高度，你应该使用像“ex”这样的垂直度量，而不是“em”的水平度量。为了反映这一点，例子发生了变化。

#5

You could do this with javascript (see below).

您可以使用javascript(参见下面)。

<style type="text/css">
th {
font-size: 50%;
width: 20em;
background-color: #aaa;

}
.off {
background-color: #aaa;
}
.on {
background-color: #333
}


<th onmouseover="this.className='on'" onmouseout="this.className='off'">><a href="foo">Link 1</a></th>

#6

The th element needs to have a height assigned to it. Giving it a height of 100% should cause the element to expand to the height of its container (i.e. the height of the row). This may not work properly in IE 6, you may try adding _height: 1% to address IE6 - I don't have IE6 to test this with, but I tested in Firefox and it appears to be doing what you want.

第一个元素需要给它分配一个高度。将元素的高度设为100%应该会使元素扩展到容器的高度(即行的高度)。这在IE6中可能不能正常工作，您可以尝试添加_height: 1%来解决IE6——我没有IE6来测试它，但是我在Firefox中测试过，它似乎正在做您想做的事情。

th {
  height: 100%;
}

#7

The closest i got was this...

我得到的最接近的是……

th {
  float: left;
  overflow: hidden;
  font-size: 50%;
  width: 20em;
  margin: auto;
}
th a {
  display: table; /* or block, up to you */
  margin: none;
  width:100%;
  height: 1px;
  background-color: #aaa;
  padding: 20%;
}

But it makes all your rows the same height. Maybe someone else can fix that if it's a problem.

但是它使所有的行都一样高。如果这是个问题，也许其他人可以解决。

#1