为什么在Chrome和FF的display：table-row而不是IE9的display：table-row中可以100％的高度工作？

Question

I have a little dilemma. 我有一个两难的境地。 I could work around this issue, but it would be a pain to do so and still limit things in sense of how a site layout could work. 我可以解决此问题，但是这样做很痛苦，而且在限制网站布局的工作方式上仍然会受到限制。 Basically I've been using the following method to give myself a sticky footer that is actually height variable: 基本上，我一直在使用以下方法给自己一个粘滞的页脚，该页脚实际上是高度可变的：

http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/ http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/

Example: 例：

The CSS: CSS：

html, body {height:100%; width:100%; margin:0;}
.wrapper {display:table; width:100%;}
html>body .wrapper {height:100%;}
.wrapperRow {display:table-row;}
.wrapperRow.wrapperExpand {height:100%;}
.this-wont-expand-to-100-percent-in-IE {height:100%;}

The HTML: HTML：

<body>
<div class="wrapper">

<div class="wrapperRow">This is the header</div>

<div class="wrapperRow wrapperExpand">
<div class="this-wont-expand-to-100-percent-in-IE">
This is the content
</div>
</div>

<div class="wrapperRow">This is the footer</div>

</div>
</body>

CodePen: http://cdpn.io/ILisk CodePen： http ：//cdpn.io/ILisk

THE PROBLEM: 问题：

Well, the problem is this works just fine in Chrome and Firefox... however it does NOT work in IE 9 or lower (not sure if it does in IE 10). 好吧，问题是这在Chrome和Firefox中可以正常工作...但是在IE 9或更低版本中不起作用（不确定在IE 10中是否可以工作）。 The 'wrapperRow wrapperExpand' div does have it's height set to an absolute height of 100%, which is the parent of the 'this-wont-expand-to-100-percent-in-IE' and that is also set to 100%. 'wrapperRow wrapperExpand'div的高度确实设置为绝对高度100％，这是“ this-wontexpand-to-100％-in-IE”的父级，并且也设置为100％。 I don't understand why this doesn't work. 我不明白为什么这行不通。 Does anyone have a solution or work around to make that inner child div (the 'this-wont-expand-to-100-percent-in-IE' one) match the height of it's parent? 有没有人有解决方案或变通办法以使内部子div（即“将这种情况扩展到IE中的100％”）与父级的高度匹配？ (the 'wrapperRow wrapperExpand' one) （“ wrapperRow wrapperExpand”之一）

I'm starting to think that it's just not possible in IE... at least not without using java-script perhaps... unfortunately I'm really not that familiar with that. 我开始认为这在IE中是不可能的……至少在没有使用Java脚本的情况下……不幸的是，我真的对此并不熟悉。 Any ideas? 有任何想法吗？

Answer 1

Web browsers often tries to fix your bad-coding, but only smarter ones will succeed! Web浏览器经常尝试修复您的错误编码，但是只有更智能的浏览器才能成功！

When you use table display type such as table , table-row for some elements, It's supposed to use table-cell for inner elements too. 当您将table显示类型（例如table ， table-row用于某些元素时，也应该将table-cell用于内部元素。 That's what you've forgot: 那就是你忘记的：

.this-will-expand-to-100-percent-in-IE {
  display: table-cell;
  height:100%;
}

Here is the CodePen Demo . 这是CodePen演示 。

By the way, in this case, I'd prefer to use Ryan Fait's Sticky footer (instead of using a CSS table layout). 顺便说一句，在这种情况下，我更喜欢使用Ryan Fait的Sticky页脚（而不是使用CSS表布局）。 You could also find a snippet on CSS-Tricks . 您还可以在CSS-Tricks上找到一个代码段。

为什么在Chrome和FF的display：table-row而不是IE9的display：table-row中可以100％的高度工作？

问题描述

1 个解决方案

解决方案1
1 2013-08-24 20:35:19

为什么在Chrome和FF的display：table-row而不是IE9的display：table-row中可以100％的高度工作？

问题描述

1 个解决方案

解决方案1 1 2013-08-24 20:35:19

解决方案1
1 2013-08-24 20:35:19