我有点进退两难。我可以解决这个问题，但这样做会很痛苦，而且仍然会限制网站布局的工作方式。基本上我一直在使用以下方法给自己一个高度可变的粘性页脚:
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 或更低版本 中不工作(不确定它是否在即 10)。 'wrapperRow wrapperExpand' div 确实将其高度设置为 100% 的绝对高度，它是 'this-wont-expand-to-100-percent-in-IE' 的父级并且也设置为 100% .我不明白为什么这不起作用。有没有人有解决方案或解决办法使内部子 div('this-wont-expand-to-100-percent-in-IE' div)与其父 div 的高度相匹配？ ('wrapperRow wrapperExpand' 之一)
我开始认为这在 IE 中是不可能的……至少在不使用 java-script 的情况下是不可能的……不幸的是我真的不太熟悉它。有什么想法吗？
最佳答案
Web 浏览器经常会尝试修复您的错误编码，但只有更聪明的浏览器才能成功!
当你使用table显示类型如table, table-row 用于某些元素时，它应该使用table- cell 也用于内部元素。那是你忘记的:
.this-will-expand-to-100-percent-in-IE {
display: table-cell;
height:100%;
}
这是 CodePen Demo .
顺便说一下，在这种情况下，我更愿意使用 Ryan Fait's Sticky footer (而不是使用 CSS 表格布局)。您还可以在 CSS-Tricks 上找到一个片段.
关于html - 为什么 100% 高度在显示器 :table-row on Chrome & FF but not in IE9? 内起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18422446/