Html 如何让 div 填充整个表格单元格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19684509/
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
How do I make a div fill an entire table cell?
提问by Craig
I'm trying to fill the center cell of a table with a div element. For the purposes of illustrating the problem, the div is styled with a red background. It seems to work in Chrome, but not IE. In the fiddle below, IE is setting the height of the div to the minimum height necessary to contain its content. In tinkering around with this problem with different CSS settings, I managed to get IE to interpret "height: 100%"; as "the height of the browser window". However, as the question states, I want IE to interpret it as the height of the td cell. Any ideas?
我正在尝试用 div 元素填充表格的中心单元格。为了说明问题，该 div 的样式为红色背景。它似乎适用于 Chrome，但不适用于 IE。在下面的小提琴中，IE 将 div 的高度设置为包含其内容所需的最小高度。在用不同的 CSS 设置修补这个问题时，我设法让 IE 解释“高度：100%”；作为“浏览器窗口的高度”。但是，正如问题所述，我希望 IE 将其解释为 td 单元格的高度。有任何想法吗？
CSS:
CSS：
*{
padding: 0px;
margin: 0px;
}
html, body{
height: 100%;
}
#container{
height:100%;
width: 100%;
border-collapse:collapse;
}
#centerCell{
border: 1px solid black;
}
#main{
height: 100%;
background-color: red;
}
HTML:
HTML：
<table id="container">
<tr id="topRow" height="1px">
<td id="headerCell" colspan="3">
TOP
</td>
</tr>
<tr id="middleRow">
<td id="leftCell" width="1px">
LEFT
</td>
<td id="centerCell">
<div id="main">CENTER</div>
</td>
<td id="rightCell" width="1px">
RIGHT
</td>
</tr>
<tr id="bottomRow" height="1px">
<td id="footerCell" colspan="3">
BOTTOM
</td>
</tr>
</table>
采纳答案by cloudpta
have you tried changing css to:
您是否尝试将 css 更改为：
#centerCell{
border: 1px solid black;
height:100%;
}
seems to work for me on edge, firefox and chrome
似乎在 Edge、Firefox 和 chrome 上对我有用
回答by Craig
I did some more research on this and collected some info that might come in handy to others trying to solve similar problems. The CSS spec says the following three things that I think are important:
我对此进行了更多研究，并收集了一些信息，这些信息可能对其他试图解决类似问题的人有用。CSS 规范说明了以下三件我认为很重要的事情：
First, re: specifying the height (of a div) as a percentage:
首先，重新：将高度（div）指定为百分比：
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
该百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为 'auto'。
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
... a height of 'auto' won't fill the cell unless the content is taller than the cell's minimum height. But if we try to explicitly set the height of the containing cell or row, then we run into the following problem:
...除非内容高于单元格的最小高度，否则“自动”的高度不会填充单元格。但是如果我们尝试显式设置包含单元格或行的高度，那么我们会遇到以下问题：
CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values.
当使用百分比值指定高度时，CSS 2.1 没有定义表格单元格和表格行的高度是如何计算的。
http://www.w3.org/TR/CSS21/tables.html#height-layout
http://www.w3.org/TR/CSS21/tables.html#height-layout
Since the spec doesn't define it, I guess it's not too surprising that Chrome and IE choose to calculate it differently.
由于规范没有定义它，我想 Chrome 和 IE 选择不同的计算方式也就不足为奇了。
Alternatively, (as xec indirectly pointed out) trying to use relative positioning has the following spec problem:
或者，（正如 xec 间接指出的）尝试使用相对定位有以下规范问题：
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
'position:relative' 对 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell 和 table-caption 元素的影响未定义。
www.w3.org/TR/CSS21/visuren.html#propdef-position
www.w3.org/TR/CSS21/visuren.html#propdef-position
So I've concluded there's probably not a pure CSS way to solve the problem that one can reasonably expect to work on most browsers.
所以我得出的结论是，可能没有一种纯粹的 CSS 方法来解决人们可以合理地期望在大多数浏览器上工作的问题。
At first, I thought, "Wow, the CSS spec is pretty shoddy and incomplete for leaving all this stuff undefined." As I thought about it more, though, I realized that defining the spec for these issues would a lot more complicated than it appears at first. After all, row/cell heights are calculated as a function of the heights of their content, and I want to make the height of my content a function of the row/cell height. Even though I have a well-defined, terminating algorithm for how I want it to work in my specific case, it's not clear that the algorithm would easily generalize to all the other cases that the spec would need to cover without getting into infinite loops.
起初，我想，“哇，CSS 规范非常粗制滥造，因为没有定义所有这些东西。” 然而，当我考虑得更多时，我意识到为这些问题定义规范会比最初看起来复杂得多。毕竟，行/单元格高度是作为其内容高度的函数计算的，我想让我的内容的高度成为行/单元格高度的函数。即使我有一个明确定义的终止算法，我希望它在我的特定情况下如何工作，但不清楚该算法是否可以轻松地推广到规范需要涵盖的所有其他情况，而不会陷入无限循环。
回答by cronoklee
Just set the table cell to: position:relativeand the div to:
只需将表格单元格设置为：position:relative并将 div 设置为：
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
Edit 2017:DEMO BELOW: (note how you cannot see the red td)
编辑 2017 年：DEMO BELOW ：（请注意您是如何看不到红色 td 的）
#expandingDiv {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: yellow;
}<table style="width: 120px">
<tr>
<td style="background: blue">blue td</td>
<td style="background: green">green td</td>
</tr>
<tr>
<td style="background: red; position: relative">
<div id='expandingDiv'> yellow div </div>
</td>
<td style="background: orange">
Some longer text which makes the bottom two tds expand dynamically.
</td>
</tr>
</table>回答by Peter V. M?rch
Although I liked Craig's answer and will not use the approach in this answer myself, I did get quite far with this jsFiddle.
虽然我喜欢 Craig 的回答并且我自己不会在这个答案中使用这种方法，但我确实在这个jsFiddle 上做得很远。
It relies on a hack, however: Setting height: 1pxon the table. It works in Chrome, FF, IE11 and Edge (all that I tested), but Chrome starts misbehaving in edge cases. See the fiddle. Here are the interesting bits:
然而，它依赖于一个黑客：height: 1px在桌子上设置 。它适用于 Chrome、FF、IE11 和 Edge（所有我测试过的），但 Chrome 在边缘情况下开始行为不端。见小提琴。以下是有趣的部分：
table {
width: 100%;
/* Why does this make it work? */
height: 1px;
}
td {
border: 10px solid blue;
height: 100%;
}
#container {
width: calc(100% - 20px);
height: calc(100% - 20px);
border: 10px solid black;
}
Too much of a hack-smell to me.
对我来说太多了。
回答by 55cc077
Here's a jsfiddle: https://jsfiddle.net/55cc077/pvu5cmta/
这是一个 jsfiddle：https://jsfiddle.net/55cc077/pvu5cmta/
CSS height: 100% only works if the element's parent has an explicitly defined height. This jQuery sets the table cell height in the first column.
CSS height: 100% 仅当元素的父元素具有明确定义的高度时才有效。这个 jQuery 在第一列中设置表格单元格的高度。
<script type="text/javascript">
$(function(){
$('.myTable2 tr').each(function(){
var H1 = $(this).height(); // Get the row height
$(this).find('td:first').css({'height': H1 + 'px', 'line-height': H1 + 'px'}); //Set td height to row height
});
});
</script>
回答by TugboatCaptain
Simply set the line height of the div; as long as its display is still a block level element. There is no need for relative or absolute positioning or hard coding of the height at the div level or any of its parents. Works in IE 8+, Firefox, and Chrome.
只需设置div的行高；只要它的显示仍然是块级元素。不需要相对或绝对定位或在 div 级别或其任何父级对高度进行硬编码。适用于 IE 8+、Firefox 和 Chrome。
Example:
例子：
line-height: 50px;
// or
line-height: 2em;
