高度 100% 在 IE 中不起作用答案

【问题标题】：Height 100% not working in IE高度 100% 在 IE 中不起作用
【发布时间】：2013-08-14 04:23:10
【问题描述】：

我知道有很多关于此的问题，我已经查看了所有问题。我有一个站点，我需要将左侧 <td> 扩展 100%。我将所有包含块设置为 100%，这在 chrome 和 safari 中效果很好。但是，它不会扩展到 IE 或 Firefox 中的屏幕底部。我在这里有一个粗略的草图，因为代码太长而无法粘贴。我还在页面中包含了 css 以使其更易于查看。

我使用了这两个帖子，但都没有解决我的问题。 CSS 100% height in ie Div 100% height works on Firefox but not in IE

我是否缺少容器，或者是否有特殊方法可以在 IE 和 Firefox 中实现这一点？这是我第一次在 css 中弄乱 100% 的高度。

【问题讨论】：

该网站在 Firefox 和 IE 中对我来说看起来一样。你能添加一个你的意思的截图吗？
啊，好吧，chrome告诉我你的意思。
@Bobo 我看到我不小心用我的像素集代码在 Mozilla 中测试了它。它在 Firefox 中也不起作用：/

标签： html css internet-explorer

【解决方案1】：

是因为td.left中的这行css：

显示：内联块；

删除它，使其保持默认值：display:table-cell。然后它可以在 IE 中运行。

我强烈建议您不要在这种布局中使用表格。这是一个很好的教程，它将向您展示如何使用 divs+css 执行此操作：http://learnlayout.com/

【讨论】：

td 的默认值为display:table-cell。但你是对的。此外，IE 和 Firefox 是正确的。 Chrome 的实现是坏掉的。
糟糕。你说得对。关于 Chrome 的非标准实现的有趣说明也在这里。
我不知道为什么我什至把它放在那里....我认为这是因为我从 div 更改为 table 并且没有编辑 css。非常感谢！

【解决方案2】：

我能想到的最好方法是用更大的绝对 DIV 包裹两个面板，这样你就可以给内部 div 一个（工作）风格，如下所示：

height: 100%;

我在这里做了一个例子：

结果 - http://fiddle.jshell.net/E8SK6/1/show/

代码 - http://jsfiddle.net/E8SK6/1/

【讨论】：