为什么100％高度在显示器中工作：table-row on Chrome& FF但不是在IE9？ [英] Why does 100% height work inside a display:table-row on Chrome & FF but not in IE9?
问题描述
我有一点困境。我可以解决这个问题，但这将是一个痛苦，这样做仍然限制了网站布局如何工作的意义。基本上我一直使用下面的方法给自己一个粘滞的页脚，实际上是高度变量：
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/
示例：
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%;}
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
问题：
好吧，问题是这个工作在Chrome和Firefox中可以正常工作...但不工作 IE 9或更低版本（不确定是否在IE 10中）。 wrapperRow wrapperExpanddiv的高度设置为100％的绝对高度，它是this-wont-expand-to-100-percent-in-IE的父级，也设置为100％ 。我不明白为什么这不工作。有没有人有解决方案或工作，使内部的孩子div（这个不扩展到100％在IE）匹配其父的高度？ （'wrapperRow wrapperExpand'one）
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). 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%. 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? (the 'wrapperRow wrapperExpand' one)
我开始认为它只是不可能在IE ...至少不使用java脚本也许..不幸的是，我真的不是那么熟悉。任何想法？
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. Any ideas?
推荐答案
网络浏览器通常会尝试修复您的错误代码，但只有更聪明的代码才会成功！ / em>
Web browsers often tries to fix your bad-coding, but only smarter ones will succeed!
当您使用 table 显示类型，例如 table ， table-row 对于一些元素，也应该使用 table-cell 这就是你忘记了：
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. That's what you've forgot:
.this-will-expand-to-100-percent-in-IE {
display: table-cell;
height:100%;
}
这是 CodePen演示 。
Here is the CodePen Demo.
顺便说一句，更喜欢使用 Ryan Fait的粘性页脚（而不是使用CSS表格布局）。您还可以在 CSS-Tricks 上找到一个代码段。
By the way, in this case, I'd prefer to use Ryan Fait's Sticky footer (instead of using a CSS table layout). You could also find a snippet on CSS-Tricks.
这篇关于为什么100％高度在显示器中工作：table-row on Chrome& FF但不是在IE9？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
