如何使<div>填充<td>高度
这个问题的答案需要更新，因为浏览器已经改变了
原来的问题
我已经浏览了StackOverflow上的几篇文章，但一直没能find这个相当简单的问题的答案。
我有这样的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> 我需要的是div填充td的高度，所以我可以将div的背景（图标）放在td右下angular。
你怎么build议我去做？
如果你给你的TD一个1px的高度，那么子div将有一个加权的父亲来计算它的％。 因为你的内容会比1px大，td会自动增长，div也是如此。 有点垃圾，但我敢打赌，它会工作。
CSS高度：100％只有在元素的父级具有明确定义的高度时才有效。 例如，这将按预期工作：
td { height: 200px; } td div { /* div will now take up full 200px of parent's height */ height: 100%; }
既然看起来你的<td>会变高度，那么如果你在右下angular的图标上添加了一个绝对定位的图像，如下所示：
.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; }
随着表格单元格标记如此：
<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; }
另外，使用内联块：
.thatSetsABackgroundWithAnIcon{ display:inline-block; }
内联块方法的工作示例：
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>
这个问题已经在这里回答了 。 只要把height: 100%的div和容器td 。
真的要用JS做这个。 这是一个解决scheme。 我没有使用你的类名称，但我叫“全高”的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() } });
}
而且你会想从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'); }
}
我的答案可能不是你想要的，但我认为这是你需要你应该使用这个结构：
<table> <tr> <td class="table-class thatSetsABackground"> <table border="0" cellpadding="0" cellspacing="0" class="table-class"> <tr> <td class="act-like-your-first-div"> //any thing you want </td> <td class="act-like-your-another-div"> //any thing you want </td> </tr> <table> </td> </tr> </table>
和风格一样
.table-class { width: 100%; height: 100%; text-align: center; }
所以你可以使用这个解决scheme在这样的任何问题！
修改<td>本身的背景图像。
或者将一些CSS应用到div：
.thatSetsABackgroundWithAnIcon{ height:100%; }
