CSS IE 显示：表格单元格子忽略高度：100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27384433/
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
IE display: table-cell child ignores height: 100%
提问by Nit
I need to dynamically build a table to hold some data.
I've followed the usual approach of using divs with display: table, display: table-rowand display: table-cell:
我需要动态构建一个表来保存一些数据。
我遵循了将 div 与display: table,display: table-row和一起使用的通常方法display: table-cell：
.tab {
display: table;
height:100%;
width: 200px;
}
.row {
height: 100%;
display: table-row;
}
.elem {
border: 1px solid black;
vertical-align: top;
display: table-cell;
height:100%;
background: blue;
}
.content {
height: 100%;
background: greenyellow;
}<div class="tab">
<div class="row">
<div class="elem">
<div class="content">
Content
</div>
</div>
<div class="elem">
<div class="content">
Longer content that will need to wrap around eventually you know and don't you hate it when things don't end as you expect them octopus
</div>
</div>
</div>
</div>In most browsers I get the expected output:
在大多数浏览器中，我得到了预期的输出：
However, in IE8 (and possibly later versions, I haven't tested later versions), I get the following:
但是，在 IE8（可能还有更高版本，我还没有测试更高版本）中，我得到以下信息：
The height: 100%set on the div surrounding "Content"is ignored.
在height: 100%周围的DIV集“内容”被忽略。
According to CanIUse, IE8 should offer full support for the related display properties.
根据CanIUse，IE8 应该提供对相关显示属性的全面支持。
I've looked through a number of similar questions on SO without finding a working solution: most solutions either rely on Javascript (which I'm looking to avoid), use a fixed height (ibid previous) or don't work on IE8.
我已经查看了许多关于 SO 的类似问题，但没有找到可行的解决方案：大多数解决方案要么依赖于 Javascript（我希望避免这种情况），要么使用固定高度（同上）或不适用于 IE8。
回答by BoltClock
Unfortunately, the effect of percentage values for heighton display: table-rowand display: table-cellelements is undefined according to the spec:
不幸的是，根据规范，heightondisplay: table-row和display: table-cell元素的百分比值的影响是未定义的：
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 没有定义表格单元格和表格行的高度是如何计算的。
So while a browser may claim to offer full support for table layout, certain aspects such as percentage heights may not be consistently implemented across all browsers because there is no correct behavior. You couldtry raising an issue on Microsoft Connect in hopes that they will change the behavior to be interoperable, but in the meantime you will need to find a different workaround (and even then you can't guarantee the behavior will remain interoperable, even in other browsers).
因此，虽然浏览器可能声称完全支持表格布局，但某些方面（例如百分比高度）可能无法在所有浏览器中一致实现，因为没有正确的行为。您可以尝试在 Microsoft Connect 上提出问题，希望他们将行为更改为可互操作，但与此同时，您需要找到不同的解决方法（即使如此，您也无法保证行为将保持可互操作，即使在其它浏览器）。
To make matters worse, I just tested and this affects all versions of IE up to and including 11, which means an IE-specific hack will fall short here. If you needto use a CSS table layout, as evidenced by the fact that you need to support IE8, then a pure CSS workaround is probably not feasible.
更糟糕的是，我刚刚进行了测试，这会影响 IE 的所有版本（包括 11），这意味着特定于 IE 的 hack 将在这里失败。如果您需要使用 CSS 表格布局，正如您需要支持 IE8 的事实所证明的那样，那么纯 CSS 解决方法可能不可行。
回答by Dariusz Sikorski
For Internet Explorer 8-10 table-cellswith height: 100%;have to be wrapped by table-rowwith height: 100%;.
对于 Internet Explorer 8-10 table-cellswithheight: 100%;必须用table-rowwith包裹height: 100%;。
Html for IE should be like:
IE 的 Html 应该是这样的：
table > table-row > table-cell
While other browsers will work properly with
虽然其他浏览器可以正常使用
table > table-row
or
table > table-cell
[edit]I reviewed the question again, and noticed You want to set 100% height not to the table-cells, but on the content inside it.
[编辑]我再次查看了这个问题，并注意到您想将 100% 高度设置为不是表格单元格，而是它里面的内容。
solution 1: So for Internet Explorer content-height is related to closest element with height set in absolute units, such as pixels, em's, if you want to use % height, you may also need to set 100% height on all parent elements, this will be html and body. working example
解决方案1：因此对于Internet Explorer，内容高度与高度以绝对单位设置的最近元素相关，例如像素，em，如果要使用％高度，则可能还需要在所有父元素上设置100％高度，这将是 html 和正文。 工作示例
solution 2: Simply add
解决方案2：只需添加
.content {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.elem {
overflow: hidden;
}
You don't need to set height on Any of the parent elements in this case. working example.
在这种情况下，您不需要在任何父元素上设置高度。 工作示例。
Hope this helps.
希望这可以帮助。
