使DIV填充整个表格单元格

我已经看过这个问题并在Google上搜索了一下，但到目前为止没有任何效果。我认为现在是2010年（这些问题/答案很旧，还没有答案），我们有了CSS3！有什么方法可以使用CSS使div填充整个表格单元格的宽度和高度吗？

我不知道单元格的宽度和/或高度会提前多少，并且将div的宽度和高度设置为100％无效。

另外，我需要div的原因是因为我需要将某些元素绝对定位在单元格之外，并且position: relative不适用于tds，因此需要包装div。

以下代码适用于IE 8，IE 8的IE 7兼容模式和Chrome（未经其他测试）：

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

你在你原来的问题时说，制定width并height以100%没有工作，虽然，这使我怀疑，有一些规则覆盖它。您是否在Chrome或Firebug中检查了计算样式，以查看宽度/高度规则是否真正应用了？

编辑

我真愚蠢！的div大小是根据文本确定的，而不是td。您可以通过制作来在Chrome上解决此问题div display:inline-block，但在IE上则无法使用。事实证明这比较棘手...

表格单元格中的div height = 100％仅在表格本身具有height属性时才有效。

<table border="1" style="height:300px; width: 100px;">
 <tr><td>cell1</td><td>cell2</td></tr>
 <tr>
   <td>
     <div style="height: 100%; width: 100%; background-color:pink;"></div>
   </td>
   <td>long text long text long text long text long text long text</td>
 </tr>
</table>

在FireFox中，UPD还应将height=100%值设置为父TD元素

我只好一个设置假的高度与<tr>和高度：继承<td>s

tr有 height: 1px（无论如何都会被忽略）

然后设置td height: inherit

然后将div设置为 height: 100%

这在IE edge和Chrome中对我有用：

<table style="width:200px;">
    <tr style="height: 1px;">
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div>
              Something big with multi lines and makes table bigger
            </div>
        </td>
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div style="background-color: red; height: 100%;">
                full-height div
            </div>
        </td>
    </tr>
</table>

如果您想要在表格单元格中添加100％div的原因是能够将背景色扩展到整个高度，但仍然能够在单元格之间留有间距，则可以为<td>自身指定背景色并使用CSS border-spacing属性在单元格之间创建边距。

但是，如果您确实需要100％的高度div，那么正如此处其他人所提到的，您需要为分配固定的高度<table>或使用Javascript。

因此，因为每个人都在发布他们的解决方案，但对我没有一个好处，所以这里是我的（在Chrome和Firefox上进行了测试）。

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { height: 100%; }

小提琴：https：//jsfiddle.net/nh6g5fzv/

由于其他所有浏览器（包括IE 7、8和9）都只能position:relative正确处理表格单元格都可以 Firefox能够因此最好的选择是使用JavaScript填充程序。您不必为一个故障的浏览器更改DOM。当IE出问题而其他所有浏览器都出问题时，人们总是在使用垫片。

这是一个带有所有代码注释的代码段。在我的示例中，JavaScript，HTML和CSS使用了响应式Web设计实践，但如果不需要，则不必这样做。（自适应意味着它可以适应您的浏览器宽度。）

http://jsfiddle.net/mrbinky3000/MfWuV/33/

这是代码本身，但是没有上下文是没有意义的，因此请访问上面的jsfiddle URL。（完整的代码段在CSS和Javascript中都有很多注释。）

$(function() {
    // FireFox Shim
    if ($.browser.mozilla) {
        $('#test').wrapInner('<div class="ffpad"></div>');
        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;
            $ffpad.height(0);
            if ($parent.css('display') == 'table-cell') {               
                h = $parent.outerHeight();
                $ffpad.height(h);
            }
        }
        $(window).on('resize', function() {
            ffpad();
        });
        ffpad();
    }
});

我建议使用 实验性的 那么Flexbox到模拟表布局，这将使单元格的内容元素，以垂直填补它的父单元：

演示版

.table{ display:flex; border:2px solid red; }
.table > *{ flex: 1; border:2px solid blue; position:relative; }
.fill{ background:lightgreen; height:100%; position:absolute; left:0; right:0; }

/* Reset */
*{ padding:0; margin:0; }
body{ padding:10px; }

<div class='table'>
  <aside><div class='fill'>Green should be 100% height</div></aside>
  <aside></aside>
  <aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus conguet.</p>
  </aside>
</div>

经过几天的搜索，我发现了可能解决此问题的方法。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body style="height:100%">
<!-- for Firefox and Chrome compatibility set height:100% in the containing TABLE, the TR parent and the TD itself. -->
<table width="400" border="1" cellspacing="0" cellpadding="0" style="height:100%;">  
  <tr>
    <td>whatever</td>
    <td>whatever</td>
    <td>whatever</td>
  </tr>
  <tr style="height:100%;">
    <td>whatever dynamic height<br /><br /><br />more content
</td>
    <td>whatever</td>

    <!-- display,background-color and radius properties in TD BELOW could be placed in an <!--[if IE]> commentary If desired.
    This way TD would remain as display:table-cell; in FF and Chrome and would keep working correctly.    
    If you don't place the properties in IE commentary it will still work in FF and Chorme with a TD display:block;

    The Trick for IE is setting the cell to display:block; Setting radius is only an example of whay you may want a DIV 100%height inside a Cell.
    -->

    <td style="height:100%; width:100%; display:block; background-color:#3C3;border-radius: 0px 0px 1em 0px;">

    <div style="width:100%;height:100%;background-color:#3C3;-webkit-border-radius: 0px 0px 0.6em 0px;border-radius: 0px 0px 0.6em 0px;">
    Content inside DIV TAG
    </div>
     </td>
  </tr>
</table>
</body>
</html>

西班牙语：塔布（Tabla）的tru est establecer，TR和TD的身高：100％。与Esto兼容的FireFox和Chrome。Internet Explorer igno eso，等离子TD como块。De esta forma Explorersítoma la alturamáxima。

英文说明：代码内的注释

如果已<table> <tr> <td> <div>全部height: 100%;设置，则div将在所有浏览器中填充动态单元格高度。

好的，没有人提到这件事，所以我想我会发布这个技巧：

.tablecell {
    display:table-cell;
}
.tablecell div {
    width:100%;
    height:100%;
    overflow:auto;
}

溢出：在单元格内的那个容器div上的自动为我完成了把戏。没有它，div不会使用整个高度。

如果表单元格是您想要的大小，只需添加此css类并将其分配给您的div：

.block {
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100vh);
   width: 100%;
}

如果您也希望表单元格填充父级，则也将类分配给表单元格。希望对您有所帮助。

参加聚会有点晚，但这是我的解决方案：

<td style="padding: 0; position: relative;">
   <div style="width: 100%; height: 100%; position: absolute; overflow: auto;">
     AaaaaaaaaaaaaaaaaaBBBBBBBbbbbbbbCCCCCCCCCccccc<br>
     DDDDDDDddddEEEEEEEEdddfffffffffgggggggggggggggggggg
   </div>
</td>

因为我没有足够的声誉来发表评论，所以我想添加一个完整的跨浏览器解决方案，该解决方案将@Madeorsk和@Saadat的方法进行了一些细微的修改！（截至2020年2月10日在Chrome，Firefox，Safari，IE和Edge上进行测试）

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { 
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100%);
   width: 100%;
    background: pink;  // This will show that it works!
} 

但是，如果您像我一样，也希望控制垂直对齐，在这种情况下，我喜欢使用flexbox：

td > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

我认为最好的解决方案是使用JavaScript。

但是我不确定您是否需要执行此操作来解决将元素放置<td>在单元外部的问题。为此，您可以执行以下操作：

<div style="position:relative">
    <table>
        <tr>
            <td>
                <div style="position:absolute;bottom:-100px">hello world</div>
            </td>
        </tr>
    </table>
</div>

当然不是内联的，但带有类和ID。

为了使height：100％适用于内部div，您必须为父td设置高度。对于我的特殊情况，它使用height：100％起作用。这使得内部div高度变长，而表格的其他元素不允许td变得太大。您当然可以使用100％以外的其他值

如果您还希望使表格单元格具有固定的高度，以使表格单元格不会因内容而变大（使内部div滚动或隐藏溢出），那就是您别无选择，只能做一些js技巧。父td必须具有以非相对单位（不是％）指定的高度。您可能别无选择，只能使用js计算该高度。这还需要为table元素设置table-layout：fixed样式

我经常遇到类似的问题，并且总是只table-layout: fixed;在table元素和height: 100%;内部div上使用。

我最终发现除了使用jQuery之外，没有任何东西可以在所有浏览器和所有DocTypes /浏览器呈现模式下正常工作。这就是我的想法。
它甚至考虑了行跨度。

function InitDivHeights() {
    var spacing = 10; // <-- Tune this value to match your tr/td spacing and padding.
    var rows = $('#MyTable tr');
    var heights = [];
    for (var i = 0; i < rows.length; i++)
        heights[i] = $(rows[i]).height();
    for (var i = 0; i < rows.length; i++) {
        var row = $(rows[i]);
        var cells = $('td', row);
        for (var j = 0; j < cells.length; j++) {
            var cell = $(cells[j]);
            var rowspan = cell.attr('rowspan') || 1;
            var newHeight = 0;
            for (var k = 0; (k < rowspan && i + k < heights.length); k++)
                newHeight += heights[i + k];
            $('div', cell).height(newHeight - spacing);
        }
    }
}
$(document).ready(InitDivHeights);

在IE11（边缘模式），FF42，Chrome44 +中进行了测试。未使用嵌套表进行测试。

您可以这样做：

<td>
  <div style="width: 100%; position: relative; float: left;">inner div</div>
</td>

如果定位的元素及其父元素没有宽度和高度，则设置

padding: 0;

在其父元素中

不建议这样做。

我想出了一种解决方法，如果您的div不包含文本并且具有统一的背景，则该方法可以起作用。

display: 'list-item'

为div提供所需的高度和宽度，但缺点是列表项有很大的缺点。由于div具有均匀的背景色，因此我摆脱了那些样式的问题：

list-style-position: 'inside',
color: *background-color*,

我不确定您要做什么，但是您可以尝试以下一种方法：

<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>

以下应该工作。您必须为父单元格设置一个高度。 https://jsfiddle.net/nrvd3vgd/

<table style="width:200px; border: 1px solid #000;">
    <tr>
        <td style="height:100px;"></td>
    </tr>
    <tr>
        <td style="height:200px;">
            <div style="height:100%; background: #f00;"></div>
        </td>
    </tr>
</table>

试试这个：

<td style="position:relative;">
    <div style="position:absolute;top:0;bottom:0;width:100%;"></div>
</td>

尝试将display：table块放入单元格中

我没有在这里观看< div的旧CSS技巧在< td > 内 >。因此，我提醒：简单设置一些极小值的宽度，但什么，你需要的最小宽度。例如：

<div style="width: 3px; min-width: 99%;">

在TD的宽度，在这种情况下，是由你。

这是我在HTML中扩展100％高度和100％宽度的解决方案 <td>

如果您删除代码中的第一行，则可以对其进行修复...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

因为此doctype不允许某些文件使用内的100％百分比<td>，但是如果删除此行，正文将无法将背景扩展到100％高度和100％宽度，因此我发现这DOCTYPE可以解决问题

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

此DOCTYPE可让您将身体中的背景扩展为100％高度和100％宽度，并将100％高度和100％宽度全部吸收到 <td>