Html CSS：让块元素填充父元素的整个空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/546946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Make a block element fill the entire space of a parent element?
提问by OverloadUT
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.
我试图在一个<th>元素中放置一个链接，并让该<a>元素填充<th>. 虽然我可以让它以 width:100% 水平填充，但事实证明让它垂直填充很麻烦。height: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.
我想这样做，以便用户可以单击单元格中的任意位置来激活链接。我知道我可以在它<th>本身上放置一个 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.
说明：表格的每一行都可以有不同的高度，因为内容是动态的，因此对<a>或<th>元素使用固定高度的解决方案将不起作用。
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 atag is.
正如您将鼠标悬停在链接上时所看到的，该<a>元素没有垂直填充，这会产生一种尴尬的外观。我可以通过将其置于“ th:hover a”样式来修复悬停背景，但是如果您单击实际a标签所在的位置，该链接仍然只能实际起作用。
采纳答案by acromm
just change th style to this
只需将样式更改为此
th {
font-size: 50%;
width: 20em;
height: 100%;
line-height: 100%;
}
cheers
干杯
回答by bdukes
As @Hobersays, you need to give the <th>a height. You could also use height: 100%there.
正如@Hober所说，你需要给出<th>一个高度。你也可以height: 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>，它看起来像你可能不会在这种情况下（因为他们就在身边），我有运气增加填充推<a>出的边缘（从过去任何填充的<th>本身），然后用相应的负余量带来回。像这样：
th a{
padding: 10px 0;
margin: -10px 0;
}
回答by bsberry
You need to give the <th>a height, so that your style block will end up something like
你需要给<th>一个高度，这样你的样式块最终会像
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”的水平度量。示例已更改以反映这一点。
回答by jgallant
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% 将最终成为 TEXT 本身的高度。
A pixel height will give you a static height, and will work for this situation.
像素高度将为您提供静态高度，并且适用于这种情况。
td a {height: 100px;}
回答by superUntitled
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>
回答by Bryan Rehbein
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.
第 th 个元素需要分配一个高度。给它一个 100% 的高度应该会导致元素扩展到它的容器的高度（即行的高度）。这在 IE 6 中可能无法正常工作，您可以尝试添加_height: 1%到地址 IE6 - 我没有 IE6 来测试它，但我在 Firefox 中进行了测试，它似乎正在做你想要的。
th {
height: 100%;
}
回答by gargantuan
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.
但它使您所有的行都具有相同的高度。如果有问题，也许其他人可以解决这个问题。
