我有点进退两难。我可以解决这个问题，但这样做会很痛苦，而且仍然会限制网站布局的工作方式。基本上，我一直在使用以下方法给自己一个实际上是高度可变的粘性页脚：
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
问题：
问题是，这在Chrome和Firefox中运行得很好。。。但是，它在IE 9或更低版本中不起作用（不确定它在IE 10中是否起作用）。"wrapperRow wrapperExpand"div的高度确实设置为100%的绝对高度，这是"this-wont-expand-to-100-percent-in-IE"的父级，也设置为100%。我不明白为什么这不起作用。是否有人有解决方案或解决方法使内部子div（"this-wont-expand-to--100-percent-in-IE"）与其父div的高度匹配？（"wrapperRow wrapperExpand"之一）
我开始认为这在IE中是不可能的…至少如果不使用java脚本的话。。。不幸的是，我真的不太熟悉。有什么想法吗？
Web浏览器经常试图修复糟糕的编码，但只有更聪明的浏览器才能成功
当某些元素使用table显示类型（如table、table-row）时，内部元素也应该使用table-cell。这就是你忘记的：
.this-will-expand-to-100-percent-in-IE {
display: table-cell;
height:100%;
}
这是CodePen演示。
顺便说一句，在这种情况下，我更喜欢使用Ryan Fait的Sticky页脚（而不是使用CSS表格布局）。你也可以在CSS技巧上找到一个片段。