CSS：使块元素填充父元素的整个空间？ [英] CSS: Make a block element fill the entire space of a parent element?

问题描述

我试图在< th> 元素中加入一个链接，并使< a> 元素填充< th> 的整个空间。虽然我可以得到它水平与宽度：100％，让它垂直填充被证明是很麻烦。高度：100％似乎没有效果。

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

说明：表格的每一行可以有不同的高度，因为内容是动态的，因此解决方案使用固定高度的< 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>链接1< / a>< / th> 
< td> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 < / td> 
< / tr> 
< tr> 
< th>< a href =foo>链接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> 
  

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

正如你可以看到，如果你鼠标悬停的链接， code>< a> 元素不会垂直填充，这会产生尴尬的外观。我可以通过将悬停背景设置为 th：hover a 样式来修复悬浮背景，但是如果您点击实际的 a 标签。

解决方案

只需将样式更改为

  th {
 font-size：50％; 
 width：20em; 
 height：100％; 
 line-height：100％; 
} 
  

干杯

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.

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.

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.

解决方案

just change th style to this

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

cheers

这篇关于CSS：使块元素填充父元素的整个空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！