Question

我见过this question和googled a bit，但到目前为止没有任何效果。我现在认为它是2010年（那些问题/答案很老，而且很好，没有答案）我们有CSS3！有没有办法让div使用CSS填充整个表格单元格的宽度和高度？

我不知道单元格的宽度和/或高度是提前的，将div的宽度和高度设置为100％也不起作用。

另外，我需要div的原因是因为我需要绝对将一些元素放在单元格之外，而position: relative不适用于td，所以我需要一个包装div。 / p>

Answer 1

表格单元格中的

div height = 100％仅在表格具有高度属性时才有效。

<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元素

Answer 2

以下代码适用于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。您可以通过div display:inline-block在Chrome上修复此问题，但它不适用于IE。这证明比较棘手......

Answer 3

我必须将假高度设置为<td>s和身高：继承height: 1px

tr有 height: inherit （无论如何都被忽略了）

然后设置td height: 100%

然后将div设置为 <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>

这适用于我在IE边缘和Chrome：

＆＃13;

<input type='file' />

＆＃13;

Answer 4

如果您想要在表格单元格中使用100％div的原因是能够将背景颜色延伸到整个高度，但仍然能够在单元格之间留出间距，则可以给出<td>本身是背景颜色，并使用CSS border-spacing属性在单元格之间创建边距。

但是，如果你确实需要一个100％高度的div，那么就像其他人提到的那样，你需要为<table>分配一个固定的高度或者使用Javascript。

Answer 5

由于每个其他浏览器（包括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();
    }
});

Answer 6

我建议使用实验 Flexbox来模拟表格布局，这将允许单元格的内容元素垂直填充其父单元格：< / p>

演示

.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>

Answer 7

经过几天的搜索，我找到了解决这个问题的可能方法。

 <!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>

西班牙语： El truco es establecer la Tabla，el TR y el TD高度：100％。 Esto lo hace兼容con FireFox和Chrome。 Internet Explorer ignora eso，por lo que ponemos la etiqueta TD como block。 De esta forma Explorersítomalaalturamáxima。

英文解释：在代码注释中

Answer 8

因为我没有足够的声誉来发表评论，所以我想添加一个完整的跨浏览器解决方案，该解决方案将@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;
}

Answer 9

好的没人提到这个，所以我想我会发布这个伎俩：

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

溢出：自动在单元格内的容器div上为我做了诀窍。没有它，div不会使用整个高度。

Answer 10

不建议这样做。

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

display: 'list-item'

为div提供所需的高度和宽度，但不利之处在于具有列表项的项目符号。由于div具有均匀的背景颜色，因此我摆脱了那些样式的问题：

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

Answer 11

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

padding: 0;

在其父元素中

Answer 12

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

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

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

Answer 13

聚会晚了一点，但这是我的解决方法：

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

Answer 14

您可以这样做：

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

Answer 15

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

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

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

Answer 16

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

Answer 17

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

但是我不确定你是否需要这样做来解决你在单元格外<td>中定位元素的问题。为此你可以这样做：

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

当然不是内联，而是使用类和ID。

Answer 18

除了使用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 +中测试。未使用嵌套表进行测试。

Answer 19

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

Answer 20

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

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

Answer 21

试试这个：

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

Answer 22

以下内容应该有效。您必须为父单元格设置高度。 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>

Answer 23

我不确定你想做什么，但你可以试试这个：

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

Answer 24

尝试将display：table block放在单元格中

Answer 25

我在这里看不到＆lt; div ＆gt;的旧CSS技巧里面＆lt; td ＆gt;。因此我提醒一下：简单设置宽度的最小值，但 min-width 你需要。例如：

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

在这种情况下， td 的宽度取决于您。

Answer 26

这是我在html <td>

中扩展100％高度和100％宽度的解决方案

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

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

因为这个doctype不允许在某些文件中使用<td>内部的100％百分比，但如果删除此行，则主体无法将背景扩展到100％高度和100％宽度，所以我找到了解决问题的DOCTYPE

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

此DOCTYPE可让您将身体背景扩展为100％高度和100％宽度，并让您将所有100％高度和100％宽度带入<td>

使DIV填充整个表格单元格

26 个答案:

修改

演示