Html 如何让 <div> 填充 <td> 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3542090/
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
How to make <div> fill <td> height
提问by psayre23
I've looked through several posts on StackOverflow, but haven't been able to find an answer to this rather simple question.
我已经浏览了 StackOverflow 上的几篇文章，但一直无法找到这个相当简单问题的答案。
I have an HTML construct like this:
我有一个像这样的 HTML 结构：
<table>
<tr>
<td class="thatSetsABackground">
<div class="thatSetsABackgroundWithAnIcon">
<dl>
<dt>yada
</dt>
<dd>yada
</dd>
</dl>
<div>
</td>
<td class="thatSetsABackground">
<div class="thatSetsABackgroundWithAnIcon">
<dl>
<dt>yada
</dt>
<dd>yada
</dd>
</dl>
<div>
</td>
</tr>
</table>
What I need is for the divto fill the height of the td, so I can be able to position the div's background (the icon) at the bottom-right corner of the td.
我需要的是div填充 的高度td，这样我就可以将 div 的背景（图标）定位在td.
How do you suggest I go about that?
你建议我怎么做？
回答by psayre23
If you give your TD a height of 1px, then the child div would have a heighted parent to calculate it's % from. Because your contents would be larger then 1px, the td would automatically grow, as would the div. Kinda a garbage hack, but I bet it would work.
如果你给你的 TD 一个 1px 的高度，那么子 div 将有一个高度的父级来计算它的百分比。因为您的内容会大于 1px，所以 td 会自动增长，div 也是如此。有点垃圾黑客，但我打赌它会起作用。
回答by Pat
CSS height: 100% only works if the element's parent has an explicitly defined height. For example, this would work as expected:
CSS height: 100% 仅当元素的父元素具有明确定义的高度时才有效。例如，这将按预期工作：
td {
height: 200px;
}
td div {
/* div will now take up full 200px of parent's height */
height: 100%;
}
Since it seems like your <td>is going to be variable height, what if you added the bottom right icon with an absolutely positioned image like so:
因为看起来你的<td>高度是可变的，如果你添加右下角的图标和绝对定位的图像，像这样：
.thatSetsABackgroundWithAnIcon {
/* Makes the <div> a coordinate map for the icon */
position: relative;
/* Takes the full height of its parent <td>. For this to work, the <td>
must have an explicit height set. */
height: 100%;
}
.thatSetsABackgroundWithAnIcon .theIcon {
position: absolute;
bottom: 0;
right: 0;
}
With the table cell markup like so:
使用表格单元格标记，如下所示：
<td class="thatSetsABackground">
<div class="thatSetsABackgroundWithAnIcon">
<dl>
<dt>yada
</dt>
<dd>yada
</dd>
</dl>
<img class="theIcon" src="foo-icon.png" alt="foo!"/>
</div>
</td>
Edit: using jQuery to set div's height
编辑：使用 jQuery 设置 div 的高度
If you keep the <div>as a child of the <td>, this snippet of jQuery will properly set its height:
如果您将 保留<div>为 的子代，则<td>此 jQuery 片段将正确设置其高度：
// Loop through all the div.thatSetsABackgroundWithAnIcon on your page
$('div.thatSetsABackgroundWithAnIcon').each(function(){
var $div = $(this);
// Set the div's height to its parent td's height
$div.height($div.closest('td').height());
});
回答by angryobject
You could try making your div float:
你可以尝试让你的 div 浮动：
.thatSetsABackgroundWithAnIcon{
float:left;
}
Alternativelly, use inline-block:
或者，使用内联块：
.thatSetsABackgroundWithAnIcon{
display:inline-block;
}
Working example of the inline-block method:
内联块方法的工作示例：
table,
th,
td {
border: 1px solid black;
}<table>
<tr>
<td>
<div style="border:1px solid red; height:100%; display:inline-block;">
I want cell to be the full height
</div>
</td>
<td>
This cell
<br/>is higher
<br/>than the
<br/>first one
</td>
</tr>
</table>回答by GoodNews
Really have to do this with JS. Here's a solution. I didn't use your class names, but I called the div within the td class name of "full-height" :-) Used jQuery, obviously. Note this was called from jQuery(document).ready(function(){ setFullHeights();}); Also note if you have images, you are going to have to iterate through them first with something like:
真的必须用JS来做到这一点。这是一个解决方案。我没有使用您的类名，但我将 td 类名中的 div 称为“全高”:-) 显然使用了 jQuery。请注意，这是从 jQuery(document).ready(function(){ setFullHeights();}); 调用的。另请注意，如果您有图像，则必须首先使用以下内容遍历它们：
function loadedFullHeights(){
var imgCount = jQuery(".full-height").find("img").length;
if(imgCount===0){
return setFullHeights();
}
var loaded = 0;
jQuery(".full-height").find("img").load(function(){
loaded++;
if(loaded ===imgCount){
setFullHeights()
}
});
}
}
And you would want to call the loadedFullHeights() from docReady instead. This is actually what I ended up using just in case. Got to think ahead you know!
并且您可能想要从 docReady 调用 loadedFullHeights() 。这实际上是我最终使用的以防万一。一定要三思而后行你懂的！
function setFullHeights(){
var par;
var height;
var $ = jQuery;
var heights=[];
var i = 0;
$(".full-height").each(function(){
par =$(this).parent();
height = $(par).height();
var tPad = Number($(par).css('padding-top').replace('px',''));
var bPad = Number($(par).css('padding-bottom').replace('px',''));
height -= tPad+bPad;
heights[i]=height;
i++;
});
for(ii in heights){
$(".full-height").eq(ii).css('height', heights[ii]+'px');
}
}
}
回答by Nacho Coloma
回答by Jage
Modify the background image of the <td> itself.
修改 <td> 本身的背景图片。
Or apply some css to the div:
或者将一些 css 应用到 div：
.thatSetsABackgroundWithAnIcon{
height:100%;
}
