Question

此问题的答案需要更新，因为浏览器已更改

原始问题

我查看了StackOverflow上的几篇帖子，但未能找到这个相当简单的问题的答案。

我有一个像这样的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的背景（图标）放在{{{}的右下角1}}。

你怎么建议我这样做？

Answer 1

如果你给你的TD高度为1px，那么子div就会有一个高亮的父级来计算它的％。因为你的内容会比1px大，所以td会自动增长，就像div一样。有点垃圾黑客，但我打赌它会起作用。

Answer 2

CSS高度：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;
}

表格单元格标记如下：

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

Answer 3

您可以尝试让您的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>

Answer 4

此问题已经回答here。只需将height: 100%放入div和容器td。

Answer 5

真的要用JS做这件事。这是一个解决方案。我没有使用你的类名，但是我在td类名称中调用了div＃34;全高＆＃34; :-)显然使用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');
}

}

Answer 6

修改＆lt; td＆gt;的背景图片本身。

或者将一些css应用于div：

.thatSetsABackgroundWithAnIcon{
    height:100%;
}

如何使<div>填充高度</div>

6 个答案: