CSS 使 DIV 填充整个表格单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3215553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a DIV fill an entire table cell
提问by Jason
I've seen this questionand googled a bit, but nothing so far has worked. I figure it's 2010 now (those questions/answers are old and, well, unanswered) and we have CSS3! Is there any way to get a div to fill an entire table cell's width and height using CSS?
我看过这个问题并用谷歌搜索了一下，但到目前为止没有任何效果。我想现在是 2010 年（那些问题/答案很旧，而且，没有答案），我们有 CSS3！有没有办法让 div 使用 CSS 填充整个表格单元格的宽度和高度？
I don't know what the width and/or height of the cell will be ahead of time, and setting the div's width and height to 100% does not work.
我不知道单元格的宽度和/或高度会提前多少，将 div 的宽度和高度设置为 100% 不起作用。
Also, the reason I need the div is because I need to absolutely position some elements outside of the cell, and position: relativedoes not apply to tds, so I need a wrapper div.
另外，我需要 div 的原因是因为我需要将某些元素绝对定位在单元格之外，并且position: relative不适用于tds，所以我需要一个包装器 div。
采纳答案by Ian Henry
The following code works on IE 8, IE 8's IE 7 compatibility mode, and Chrome (not tested elsewhere):
以下代码适用于 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>
You said in your original question that setting widthand heightto 100%didn't work, though, which makes me suspect that there is some other rule overriding it. Did you check the computed style in Chrome or Firebug to see if the width/height rules were really being applied?
不过，您在最初的问题中说设置width和heightto100%不起作用，这让我怀疑还有其他一些规则可以覆盖它。您是否检查了 Chrome 或 Firebug 中的计算样式以查看是否真的应用了宽度/高度规则？
Edit
编辑
How foolish I am! The divwas sizing to the text, not to the td. You can fix this on Chrome by making the divdisplay:inline-block, but it doesn't work on IE. That's proving trickier...
我是多么愚蠢！该div是大小的文字，不给td。您可以通过制作divdisplay:inline-block，在 Chrome 上修复此问题，但它不适用于 IE。事实证明这更棘手......
回答by dma
div height=100% in table cell will work only when table has height attribute itself.
表格单元格中的 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>
UPDin FireFox you should also set height=100%value to the parent TDelement
FireFox 中的UPD您还应该将height=100%值设置为父TD元素
回答by WheretheresaWill
I had to set a fakeheight to the <tr>and height: inherit for <td>s
我不得不为the和 height设置一个假<tr>高度：inherit for<td>s
tr has height: 1px(it's ignored anyway)
tr 有height: 1px（无论如何它都被忽略了）
Then set the td height: inherit
然后设置td height: inherit
Then set the div to height: 100%
然后将div设置为 height: 100%
This worked for me in IE edge and Chrome:
这在 IE 边缘和 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>回答by Matt Browne
If your reason for wanting a 100% div inside a table cell was to be able to have a background color extend to the full height but still be able to have spacing between the cells, you could give the <td>itself the background color and use the CSS border-spacing property to create the margin between the cells.
如果您想要在表格单元格内使用 100% div 的原因是能够将背景颜色扩展到整个高度，但仍然能够在单元格之间留出间距，您可以为<td>自身设置背景颜色并使用 CSS border-spacing 属性来创建单元格之间的边距。
If you truly need a 100% height div, however, then as others here have mentioned you need to either assign a fixed height to the <table>or use Javascript.
但是，如果您确实需要 100% 高度的 div，那么正如这里的其他人所提到的，您需要为 div 分配固定高度<table>或使用 Javascript。
回答by Madeorsk
So, because everyone is posting their solution and none was good for me, here is mine (tested on Chrome & Firefox).
所以，因为每个人都发布了他们的解决方案，但没有一个对我有好处，所以这是我的（在 Chrome 和 Firefox 上测试）。
table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { height: 100%; }
Fiddle: https://jsfiddle.net/nh6g5fzv/
回答by mrbinky3000
Since every other browser (including IE 7, 8 and 9) handles position:relativeon a table cell correctly and onlyFirefox gets it wrong, your best bet is to use a JavaScript shim. You shouldn't have to alter your DOM for one failed browser. People use shims all the time when IE gets something wrong and all the other browsers get it right.
由于所有其他浏览器（包括 IE 7、8 和 9）都能position:relative正确处理表格单元格，而只有Firefox 会出错，因此最好的办法是使用 JavaScript shim。你不应该为一个失败的浏览器改变你的 DOM。当 IE 出错而所有其他浏览器都正确时，人们一直使用垫片。
Here is a snippet with all the code annotated. The JavaScript, HTML and CSS use responsive web design practices in my example, but you don't have to if you don't want. (Responsive means it adapts to your browser width.)
这是一个带有所有代码注释的片段。在我的示例中，JavaScript、HTML 和 CSS 使用响应式网页设计实践，但如果您不想，则不必这样做。（响应式意味着它适应您的浏览器宽度。）
http://jsfiddle.net/mrbinky3000/MfWuV/33/
http://jsfiddle.net/mrbinky3000/MfWuV/33/
Here is the code itself, but it doesn't make sense without the context, so visit the jsfiddle URL above. (The full snippet also has plenty of comments in both the CSS and the Javascript.)
这是代码本身，但没有上下文就没有意义，因此请访问上面的 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();
}
});
回答by vsync
I propose a solution using the experimentalFlexboxto simulatea table layout which will allow a cell's content element to fill up its parent cell vertically:
我提出了一个解决方案 实验的那么Flexbox到模拟表布局，这将使单元格的内容元素，以垂直填补它的父单元：
Demo
演示
.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>回答by Jata
after several days searching I figured out a possible fix for this issue.
经过几天的搜索，我找到了解决此问题的可能方法。
<!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>
Spanish language: El truco es establecer la Tabla, el TR y el TD a height:100%. Esto lo hace compatible con FireFox y Chrome. Internet Explorer ignora eso, por lo que ponemos la etiqueta TD como block. De esta forma Explorer sí toma la altura máxima.
西班牙语：El truco es establecer la Tabla, el TR y el TD a height:100%。与 FireFox 和 Chrome 兼容。Internet Explorer ignora eso，por lo que ponemos la etiqueta TD como block。De esta forma Explorer sí toma la altura máxima。
English explanation: within the code commentaries
英文解释：代码注释内
回答by Edward Newsome
if <table> <tr> <td> <div>all have height: 100%;set, then the div will fill the dynamic cell height in all browsers.
如果<table> <tr> <td> <div>都已height: 100%;设置，则 div 将填充所有浏览器中的动态单元格高度。
回答by FlorianB
Ok nobody mentioned this so I figured I would post this trick:
好吧，没有人提到这一点，所以我想我会发布这个技巧：
.tablecell {
display:table-cell;
}
.tablecell div {
width:100%;
height:100%;
overflow:auto;
}
overflow:autoon that container div within the cell does the trick for me. Without it the div does not use the entire height.
单元格内那个容器 div 上的溢出：自动对我有用。没有它，div 不会使用整个高度。
