如何使 < div > fill < td > height

小开

修改 < td > 本身的背景图像。

或者对 div 应用一些 css:

.thatSetsABackgroundWithAnIcon{
height:100%;
}

小开

CSS height: 100%只有在元素的父元素具有显式定义的高度时才有效。例如，这将按预期运作:

td {
height: 200px;
}


td div {
/* div will now take up full 200px of parent's height */
height: 100%;
}

因为看起来你的 <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>

编辑: 使用 jQuery 设置 div 的高度

如果将 <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());
});

小开

你可以试试让 div 浮起来:

.thatSetsABackgroundWithAnIcon{


float:left;
}

或者，使用 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>

小开

最佳答案

如果您给 TD 一个1px 的高度，那么子 div 将有一个高度父节点来计算它的% 。因为内容大于1px，td 会自动增长，div 也是如此。有点像垃圾黑客，但我打赌会有用的。

小开

真的必须和 JS 这么做。我有个办法。我没有使用你们的类名，但是我在 td 类名“ full-height”中调用了 div: ——显然是使用了 jQuery。注意，这是从 jQuery (文档)中调用的。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()
}
});

}

您可能希望改为从 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');
}

}

小开

这个问题已经回答了 here。只要把 height: 100%放在 div和集装箱 td中。