如何使<div>填满<td>高度

Question

如何使<div>填满<td>高度

128

我查看了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 的背景（图标）定位到 td 的右下角。

你建议我如何解决这个问题？

- user191152

相关链接：https://dev59.com/wF3Va4cB1Zd3GeqPENe7 - Chris Moschini

6个回答

44

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

Cell 1

Cell 2

How can I make the first column of cells have a background color of red, and the second column of cells have a background color of blue? Is it possible to do this with CSS?

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

- Pat

2

我并没有真正地工作得很好，我们已经决定采取不同的方法。但是既然它是最好的答案，我会接受你的回答。 - user191152

3

哈哈，要是CSS让我改变思路的次数能换成一美元就好了 :) - Pat

7

我是唯一一个认为“CSS的height: 100%只有在元素的父级明确定义了高度时才起作用”这个规则非常蠢的人吗？浏览器无论如何都会确定父元素的高度；你不应该必须显式设置父元素的高度。 - Jez

在Firefox中，<td>上的position: relative存在错误。 - Radek

1

jQuery的解决方案有效，但只有当我将其放在文件末尾时才起作用，谢谢。 - luke_mclachlan

显示剩余4条评论

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>

- angryobject

浮动：左侧的建议似乎不起作用。通过删除它，可以改进这个答案，因为提到的第二个解决方案似乎有效。 - Wouter

1

它在Firefox上无法正常工作。似乎只能在Chrome上运行。 - YLombardi

11

这段代码片段在最近的Chromium浏览器上也无法运行（我正在使用版本号为63.0.3239.84的浏览器）。 - Michael

设置 display: inline-block 通常会使 div 比 <td> 元素本来应该有的高度要高。在我的情况下，这使得这个结果不是一个解决方案。我想要一种方式来样式化 div，使其恰好与表格单元格原来的高度相同。特别是当表格行中没有文本和其他内联元素时，这种情况会出现。 - cazort

-2

确实需要用JS来完成这个任务。以下是一种解决方案。我没有使用您的类名，但我将包含在td中的div命名为“full-height” :-) 显然使用了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');
}

}

- GoodNews

-3

这个问题已经在这里得到了解答。只需在div和容器td中都加入height: 100%即可。

- Nacho Coloma

-5

修改 <td> 元素本身的背景图片。

或者对 div 应用一些 CSS：

.thatSetsABackgroundWithAnIcon{
    height:100%;
}

- Jage

正如我在代码中所写的那样。TD已经使用类设置了background-image，因此该选项不可行。我尝试将div的高度设置为100％，但是这并不起作用。它只是包装到包含<dl>的可变高度。因此，需要某些东西使div“理解”它应该填充高度。而height：100％并不能做到这一点。（至少不是单独） - user191152

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- psayre23 · Accepted Answer

如果您将TD的高度设为1像素，那么子DIV将有一个有高度的父元素来计算其百分比。因为您的内容将大于1像素，所以TD会自动增长，DIV也会随之增长。这有点像一种垃圾解决方案，但我敢打赌它会奏效。